প্রতিক্রিয়া নেভিগেশনে পিছনে বোতামটি অক্ষম করুন

Question

আমি দেশীয় নেভিগেশন প্রতিক্রিয়া (প্রতিক্রিয়া-নেভিগেশন) স্ট্যাকনাভিগেটর ব্যবহার করছি। এটি অ্যাপ্লিকেশনটির পুরো জীবনচক্র জুড়ে লগইন পৃষ্ঠা থেকে শুরু হয়। লগইন স্ক্রিনে ফিরে ফিরে আমি কোনও বিকল্প চাই না। লগ-ইন স্ক্রিনের পরে কীভাবে এটি স্ক্রিনে লুকিয়ে রাখা যায় তা কি কেউ জানেন? বিটিডাব্লু, আমি এটি ব্যবহার করে লগইন স্ক্রিনেও আড়াল করছি:

const MainStack = StackNavigator({
  Login: {
    screen: Login,
    navigationOptions: {
      title: "Login",
      header: {
        visible: false,
      },
    },
  },
  // ... other screens here
})

Answer 1

1) রিয়েক্ট নেভিগেশন ভি 2 বা আরও নতুন করে বোতামটি অদৃশ্য হয়ে যাওয়ার জন্য:

navigationOptions:  {
    title: 'MyScreen',
    headerLeft: null
}

2) আপনি নেভিগেশন স্ট্যাক পরিষ্কার করতে চান:

ধরে নিই যে আপনি যে স্ক্রিন থেকে নেভিগেট করতে চান:

আপনি যদি রিএ্যাক্ট-নেভিগেশন সংস্করণ ভি 5 বা নতুন ব্যবহার করছেন তবে আপনি ব্যবহার করতে পারেন navigation.resetবা CommonActions.reset:

 // Replace current navigation state with a new one,
 // index value will be the current active route:

navigation.reset({
  index: 0,
  routes: [{ name: 'Profile' }],
});

উত্স এবং এখানে আরও তথ্য: https://reactnavication.org/docs/navication-prop/#reset

বা:

navigation.dispatch(
  CommonActions.reset({
    index: 1,
    routes: [
      { name: 'Home' },
      {
        name: 'Profile',
        params: { user: 'jane' },
      },
    ],
  })
);

উত্স এবং আরও তথ্য এখানে: https://reactnavication.org/docs/navication-ferences/#reset

প্রতিক্রিয়া-নেভিগেশনের পুরানো সংস্করণগুলির জন্য:

v2-v4 ব্যবহারStackActions.reset(...)

import { StackActions, NavigationActions } from 'react-navigation';

const resetAction = StackActions.reset({
  index: 0, // <-- currect active route from actions array
  actions: [
    NavigationActions.navigate({ routeName: 'myRouteWithDisabledBackFunctionality' }),
  ],
});

this.props.navigation.dispatch(resetAction);

ভি 1 ব্যবহারNavigationActions.reset

3) অ্যান্ড্রয়েডের জন্য আপনাকে ব্যাকহ্যান্ডলারটি ব্যবহার করে হার্ডওয়্যার ব্যাক বোতামটি অক্ষম করতে হবে :

http://reactnative.dev/docs/backhandler.html

বা আপনি যদি হুক ব্যবহার করতে চান:

https://github.com/react-native-commune/hooks#usebackhandler

অন্যথায় অ্যাপ্লিকেশনটি অ্যান্ড্রয়েড হার্ডওয়্যার ব্যাক বোতাম টিপ বন্ধ হবে যদি নেভিগেশন স্ট্যাক খালি থাকে।

Comments

এটি ব্যাক বোতামটি সরিয়ে ফেলবে, তবে অ্যান্ড্রয়েডে আমরা এখনও ডিভাইস ব্যাক বোতামটি ব্যবহার করে নেভিগেট করতে পারি। সেটিও নিষ্ক্রিয় করার কোনও উপায় আছে?

— গোকুল কুলকারনী

আপনি রাজা

— দিমিত্রিস ফিলিপু

এবং আপনি যখন 2018 এ "নেভিগেশনঅ্যাকশনস.রিসেট (...)" এর পরিবর্তে "স্ট্যাকএকশন.রেসেট (...)" ব্যবহার করেন, তখন রিট্যাকশন নেভিগেশন দেখুন / ডকস

— ম্যানুয়েল

"ইনডেক্স: 1" ব্যবহার করার সময় "অপরিজ্ঞাত কী" টি পড়তে পারে না। সুতরাং এই ত্রুটিটি ঠিক করতে আমি "সূচক: 0" ব্যবহার করি। আমি মনে করি এটি বোধগম্য হয়েছে

— মরিসিও পাস্তোরিনি

দেখে মনে হচ্ছে এপিআই আবার উন্নত হয়েছে, কমপক্ষে v5-এ

— AndyO

Answer 2

আপনি this.props.navigation.replace( "HomeScreen" )পরিবর্তে ব্যবহার বিবেচনা করেছেন this.props.navigation.navigate( "HomeScreen" )?

এইভাবে আপনি স্ট্যাকের সাথে কিছু যুক্ত করছেন না। সুতরাং হোমস্ক্রিন অ্যান্ড্রয়েড বা স্ক্রীনটি আইওএস-এ ডানদিকে স্যুইপ করা থাকলে পিছনে যেতে কোনও কিছুই তাকাবে না।

আরও তথ্য ডকুমেন্টেশন চেক । এবং অবশ্যই আপনি সেটিং দ্বারা ব্যাক বোতাম লুকিয়ে রাখতে পারেন headerLeft: nullমধ্যেnavigationOptions

Comments

আপনি প্রতিস্থাপন ব্যবহার করে প্যারামগুলি পাস করতে পারবেন না।

— দীপক পাঠক

Answer 3

আমরা মিথ্যা সেট করতে হবে gesturesEnabledসহ headerLeftকরার null। কারণ আমরা স্ক্রিনটিও সোয়াইপ করে পিছনে নেভিগেট করতে পারি।

navigationOptions:  {
   title: 'Title',
   headerLeft: null,
   gesturesEnabled: false,
}

Answer 4

আপনি পিছনে বোতামটি ব্যবহার করে আড়াল করতে পারেন left:null তবে অ্যান্ড্রয়েড ডিভাইসের জন্য ব্যবহারকারী যখন পিছনের বোতামটি টিপায় তখন তা ফিরে যেতে সক্ষম। আপনাকে নেভিগেশন স্থিতি পুনরায় সেট করতে হবে এবং এর সাথে বোতামটি লুকিয়ে রাখতে হবেleft:null

নেভিগেশন স্থিতি পুনরায় সেট করার জন্য এখানে ডক্স রয়েছে:
https://reactnavication.org/docs/navication-mitted#reset

এই সমাধানটি কাজ করে react-navigator 1.0.0-beta.7তবে left:nullসর্বশেষতম সংস্করণে আর কাজ করে না।

Comments

আইওএসে আপনি এখনও পপ ব্যাক করতে পর্দার প্রান্ত থেকে স্লাইড করতে পারেন। নেভিগেশন স্থিতি পুনরায় সেট করা অবশ্যই প্রয়োজন।

— ক্যামেরনমোরৌ

Answer 5

দেশীয় প্রতিক্রিয়া থেকে ব্যাকহ্যান্ডলারটি ব্যবহার করা আমার পক্ষে কাজ করেছিল। কেবলমাত্র আপনার কম্পোনেন্টউইলমাউন্টে এই লাইনটি অন্তর্ভুক্ত করুন:

BackHandler.addEventListener('hardwareBackPress', function() {return true})

এটি অ্যান্ড্রয়েড ডিভাইসে ব্যাক বোতামটি অক্ষম করবে।

Comments

এটি কেবল অ্যান্ড্রয়েড।

— জর্জিওজড

Answer 6

এটি নিজেকে খুঁজে পেয়েছি;) যোগ করে:

  left: null,

ডিফল্ট ব্যাক বোতামটি অক্ষম করুন।

const MainStack = StackNavigator({
  Login: {
    screen: Login,
    navigationOptions: {
      title: "Login",
      header: {
        visible: false,
      },
    },
  },
  FirstPage: {
    screen: FirstPage,
    navigationOptions: {
      title: "FirstPage",
      header: {
        left: null,
      }
    },
  },

Answer 7

প্রতিক্রিয়া-নেভিগেশন সংস্করণ> = 1.0.0-বিটা.9

navigationOptions:  {
   headerLeft: null
}

Answer 8

এই পরিস্থিতিটি পরিচালনা করার জন্য সর্বোত্তম বিকল্প হ'ল প্রতিক্রিয়া ন্যাভিগেশন দ্বারা সরবরাহ করা সুইচনাভিগেটর ব্যবহার করা । স্যুইচনাভিগেটরের উদ্দেশ্য হ'ল একবারে কেবলমাত্র একটি পর্দা প্রদর্শন করা। ডিফল্টরূপে, এটি পিছনে ক্রিয়াগুলি পরিচালনা করে না এবং আপনি যখন স্যুইচ করেন তখন এটি তাদের ডিফল্ট অবস্থায় রুটের পুনরায় সেট করে। প্রমাণীকরণের প্রবাহে এটি হ'ল সঠিক আচরণ।

এটি প্রয়োগের এটি একটি সাধারণ উপায়।

1. ২ টি স্ট্যাক নেভিগেটর তৈরি করুন: একটি প্রমাণীকরণের জন্য (সাইন ইন, সাইন আপ, ভুলে যাওয়া পাসওয়ার্ড ইত্যাদি) এবং অন্যটি মূল অ্যাপ্লিকেশনটির জন্য
2. এমন একটি স্ক্রিন তৈরি করুন যাতে আপনি স্যুইচ নেভিগেটর থেকে কোন রুটটি প্রদর্শন করতে চান তা যাচাই করবেন (আমি সাধারণত স্প্ল্যাশ স্ক্রিনে এটি টোকন Async স্টোরেজে সঞ্চয় করে কিনা তা পরীক্ষা করে দেখেছি)

এখানে উপরের বিবৃতিগুলির একটি কোড বাস্তবায়ন

import { createAppContainer, createSwitchNavigator } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import HomeScreen from "./homeScreenPath" 
import OtherScreen from "./otherScreenPath"
import SignInScreen from "./SignInScreenPath" 
import SplashScreen from "./SplashScreenPath"

const AppStack = createStackNavigator({ Home: HomeScreen, Other: OtherScreen });

const AuthStack = createStackNavigator({ SignIn: SignInScreen });


export default createAppContainer(
  createSwitchNavigator(
    {
      Splash: SplashScreen,
      App: AppStack,
      Auth: AuthStack,
    },
    {
      initialRouteName: 'Splash',
    }
  )
);

এখন স্প্ল্যাশস্ক্রিনে আপনি টোকেনটি যাচাই করবেন এবং সেই অনুযায়ী নেভিগেট করবেন

import React from 'react';
import {
  ActivityIndicator,
  AsyncStorage,
  StatusBar,
  StyleSheet,
  View,
} from 'react-native';

class SplashScreen extends React.Component {
  componentDidMount() {
    this.checkIfLogin();
  }

  // Fetch the token from storage then navigate to our appropriate place
  checkIfLogin = async () => {
    const userToken = await AsyncStorage.getItem('userToken');

    // This will switch to the App screen or Auth screen and this splash
    // screen will be unmounted and thrown away.
    this.props.navigation.navigate(userToken ? 'App' : 'Auth');
  };

  // Render any loading content that you like here
  render() {
    return (
      <View>
        <ActivityIndicator />
        <StatusBar barStyle="default" />
      </View>
    );
  }
}

একবার আপনি সুইচনাভিগেটরে রুট পরিবর্তন করলে এটি স্বয়ংক্রিয়ভাবে পুরানো রুট সরিয়ে দেয় এবং তাই আপনি যদি পিছনের বোতামটি টিপেন তবে এটি আপনাকে আর লেখক / লগইন স্ক্রিনে নিয়ে যাবে না to

Answer 9

আমরা শিরোনাম বামটি নালায় সেট করে এটি ঠিক করতে পারি

static navigationOptions =({navigation}) => {
    return {
        title: 'Rechercher une ville',
        headerLeft: null,
    }  
}

Answer 10

সর্বশেষ সংস্করণের জন্য টাইপস্ক্রিপ্ট সহ নেভিগেশন 5 প্রতিক্রিয়া করুন:

<Stack.Screen
    name={Routes.Consultations}
    component={Consultations}
    options={{headerLeft: () => null}}
  />

Answer 11

SwitchNavigator এই কর্ম সম্পন্ন করতে হবে। SwitchNavigatorডিফল্ট রুটগুলি পুনরায় সেট করে এবং ক্রিয়াকলাপটি চালিত হলে প্রমাণীকরণের স্ক্রীনটি আনমেট করে navigate।

import { createSwitchNavigator, createStackNavigator, createAppContainer } from 'react-navigation';

// Implementation of HomeScreen, OtherScreen, SignInScreen, AuthLoadingScreen
// goes here.

const AppStack = createStackNavigator({ Home: HomeScreen, Other: OtherScreen });
const AuthStack = createStackNavigator({ SignIn: SignInScreen });

export default createAppContainer(createSwitchNavigator(
  {
    AuthLoading: AuthLoadingScreen,
    App: AppStack,
    Auth: AuthStack,
  },
  {
    initialRouteName: 'AuthLoading',
  }
));

ব্যবহারকারী সাইনইনস্ক্রিনে গিয়ে তাদের শংসাপত্রগুলি প্রবেশ করার পরে আপনি কল করবেন

this.props.navigation.navigate('App');

Answer 12

সহজভাবে করছেন

headerLeft: null

আপনি এই উত্তরটি পড়ার সময়টিকে অবহেলা করা যেতে পারে। আপনার নিম্নলিখিত ব্যবহার করা উচিত

   navigationOptions = {
        headerTitle : "Title",
        headerLeft : () => {},
    }

Answer 13

প্রতিক্রিয়া নেভিগেশন বনাম 5.0 - স্ট্যাক বিকল্প:

options={{
headerLeft: () => { 
 return <></>; 
}
}}

Comments

আপনার উত্তরে আপনি কী করছেন দয়া করে সর্বদা বর্ণনা করুন। এটি আপডেট করা বা অপসারণ করা উচিত। আপনি আরও উত্তর সরবরাহ করার আগে কীভাবে উত্তর দেবেন তা পড়ুন ^^

— ফিনমনগ্লাস

Answer 14

আমি মনে করি এটি কেবল সহজ যোগ করুন headerLeft : null, আমি প্রতিক্রিয়া-নেটিভ ক্লাইটি ব্যবহার করছি, সুতরাং এটি উদাহরণ:

static navigationOptions = {
    headerLeft : null
};

Answer 15

প্রতিক্রিয়া নেভিগেশনের সর্বশেষ সংস্করণের জন্য, আপনি কিছু ক্ষেত্রে শূন্য ব্যবহার করলেও এটি "পিছনে" লিখিত প্রদর্শিত হতে পারে!

আপনার পর্দার নামের অধীনে আপনার মূল অ্যাপ্লিকেশনগুলিতে এই জন্য যান বা কেবল আপনার ক্লাস ফাইলে যান এবং যুক্ত করুন: -

static navigationOptions = {
   headerTitle:'Disable back Options',
   headerTitleStyle: {color:'white'},
   headerStyle: {backgroundColor:'black'},
   headerTintColor: 'red',
   headerForceInset: {vertical: 'never'},
   headerLeft: " "
}

Answer 16

সর্বশেষ সংস্করণে (v2) কাজ করে headerLeft:null। আপনি নিয়ামক navigationOptionsহিসাবে নম হিসাবে যোগ করতে পারেন

static navigationOptions = {
    headerLeft: null,
};

Answer 17

প্রতিক্রিয়া-নেভিগেশন সংস্করণের জন্য 4.x

navigationOptions: () => ({
      title: 'Configuration',
      headerBackTitle: null,
      headerLayoutPreset:'center',
      headerLeft: null
    })

Answer 18

headerLeft: null

এটি সর্বশেষতম প্রতিক্রিয়া নেটিভ সংস্করণে কাজ করবে না

এটা করা উচিত:

navigationOptions = {
 headerLeft:()=>{},
}

প্রকারের জন্য:

navigationOptions = {
 headerLeft:()=>{return null},
}

Answer 19

প্রতিক্রিয়া-নেভিগেশন সংস্করণ 5.x এ, আপনি এটি এর মতো করতে পারেন:

import { CommonActions } from '@react-navigation/native';

navigation.dispatch(
  CommonActions.reset({
    index: 1,
    routes: [
      { name: 'Home' },
      {
        name: 'Profile',
        params: { user: 'jane' },
      },
    ],
  })
);

আপনি এখানে আরও পড়তে পারেন ।