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




react-native navigation (8)

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

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

आप 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 अब नवीनतम संस्करण के लिए काम नहीं करता है।


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

  left: null,

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

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

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

static navigationOptions = {
    headerLeft: null,
  };

प्रतिक्रिया से बैकहैंडलर का उपयोग करते हुए देशी ने मेरे लिए काम किया। बस इस घटक को अपने CompWillMount में शामिल करें:

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

यह एंड्रॉइड डिवाइस पर बैक बटन को अक्षम कर देगा।


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

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

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

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

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

प्रतिक्रिया-नेविगेशन संस्करण 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 का उपयोग किया गया था। स्टैकएक्शंस.सर्सेट के बजाय इसका उपयोग किया गया था।







react-navigation