reactjs प्रतिक्रिया नेविगेशन में बैक बटन अक्षम करें




react-native navigation (10)

आप left:null का उपयोग करके पिछला बटन छिपा सकते हैं left:null , लेकिन एंड्रॉइड डिवाइस के लिए यह तब भी वापस जाने में सक्षम होता है जब उपयोगकर्ता बैक बटन दबाता है। आपको नेविगेशन स्थिति को रीसेट करने और left:null के बटन को छिपाने की आवश्यकता है left:null

यहां नेविगेशन स्थिति को रीसेट करने के लिए डॉक्स हैं: https://reactnavigation.org/docs/navigators/navigation-actions#Reset

यह समाधान react-navigator 1.0.0-beta.7 लिए काम करता है, हालांकि left:null अब नवीनतम संस्करण के लिए काम नहीं करता है।

मैं प्रतिक्रियाशील नेविगेशन (रिएक्शन-नेविगेशन) StackNavigator का उपयोग कर रहा हूं। यह ऐप के पूरे जीवनचक्र में लॉगिन पेज से शुरू होता है। मैं एक बैक ऑप्शन नहीं रखना चाहता, लॉगिन स्क्रीन पर वापस आ रहा हूं। क्या किसी को पता है कि लॉगिन स्क्रीन के बाद इसे स्क्रीन पर कैसे छिपाया जा सकता है? BTW, मैं भी इसे लॉगिन स्क्रीन में छिपाकर उपयोग कर रहा हूँ:

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

क्या आपने इसके बजाय this.props.navigation.navigate( "HomeScreen" ) this.props.navigation.replace( "HomeScreen" ) का उपयोग करने पर विचार किया है।

इस तरह आप स्टैक में कुछ भी नहीं जोड़ रहे हैं। इसलिए होमस्क्रीन में वापस जाने के लिए कुछ भी तरंगित नहीं होगा यदि एंड्रॉइड में बैक बटन दबाया जाए या स्क्रीन को आईओएस में दाईं ओर स्वाइप किया जाए।

अधिक informations Documentation जाँच करें। और निश्चित रूप से आप शीर्ष लेख के द्वारा बैक बटन छिपा सकते हैं


प्रतिक्रिया-नेविगेशन संस्करण v2 या नए के लिए

बैक बटन को गायब करने के लिए:

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

यदि आप नेविगेशन स्टैक को भी साफ करना चाहते हैं, तो आप ऐसा कुछ कर सकते हैं (यह मानते हुए कि आप उस स्क्रीन पर हैं जहाँ से आप नेविगेट करना चाहते हैं:)

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);

यहां अधिक जानकारी: https://reactnavigation.org/docs/en/stack-actions.html

एंड्रॉइड के लिए आपको बैकहैंडलर का उपयोग करके हार्डवेयर बैक बटन को अक्षम करना होगा:

https://.com/a/40146089/1979861

अन्यथा नेविगेशन स्टैक खाली होने पर ऐप एंड्रॉइड हार्डवेयर बैक बटन प्रेस पर बंद हो जाएगा।

नोट: पुरानी प्रतिक्रिया-नेविगेशन में v1 NavigationActions.reset का उपयोग किया गया था। स्टैकएक्शंस.सर्सेट के बजाय इसका उपयोग किया गया था।


हमें gesturesEnabled के साथ गलत को सेट करने की आवश्यकता है। क्योंकि हम स्क्रीन को स्वाइप करके भी वापस नेविगेट कर सकते हैं।

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

नवीनतम संस्करण में (v2) शीर्ष लेख काम करता है headerLeft:null । आप नियंत्रक के navigationOptions में जोड़ सकते हैं जैसे कि बलो

static navigationOptions = {
    headerLeft: null,
  };

हम शीर्ष लेख को शून्य करने के लिए सेट करके इसे ठीक कर सकते हैं

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

SwitchNavigator इसे पूरा करने का तरीका होगा। SwitchNavigator डिफ़ॉल्ट मार्गों को रीसेट करता है और जब navigate कार्रवाई लागू होती है, तो प्रमाणीकरण स्क्रीन को SwitchNavigator है।

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');

रिएक्ट नेविगेशन के नवीनतम संस्करण के लिए, भले ही आप कुछ मामलों में अशक्त का उपयोग करें, यह अभी भी "बैक" लिखा हुआ दिखा सकता है!

इसके लिए अपने मुख्य ऐप में जाएं। अपने स्क्रीन नाम के तहत। या बस अपनी क्लास फाइल में जाएं और जोड़ें: -

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

इसे खुद पाया;) जोड़ना:

  left: null,

डिफॉल्ट बैक बटन को डिसेबल करें।

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

प्रतिक्रिया-नेविगेशन संस्करण> = 1.0.0-beta.9

navigationOptions:  {
headerLeft: null}




react-navigation