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

Question

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

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

Answer 1

1) प्रतिक्रिया-नेविगेशन v2 या नए में बैक बटन को गायब करने के लिए:

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

2) यदि आप नेविगेशन स्टैक को साफ करना चाहते हैं:

मान लें कि आप उस स्क्रीन पर हैं जिससे आप नेविगेट करना चाहते हैं:

यदि आप प्रतिक्रिया-नेविगेशन संस्करण v5 या नए का उपयोग कर रहे हैं, तो आप उपयोग कर सकते हैं 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://reactnavigation.org/docs/navigation-prop/#reset

या:

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

स्रोत और अधिक जानकारी यहाँ: https://reactnavigation.org/docs/navigation-actions/#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);

v1 का उपयोग करेंNavigationActions.reset

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

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

या यदि आप हुक का उपयोग करना चाहते हैं:

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

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

Comments

यह बैक बटन को हटा देगा, लेकिन एंड्रॉइड में हम अभी भी डिवाइस बैक बटन का उपयोग करके नेविगेट कर सकते हैं। वहाँ के रूप में अच्छी तरह से अक्षम करने के लिए एक रास्ता है?

— गोकुल कुलकर्णी

आप बादशाह हैं

— दिमित्रिस फिलिप्पो

और जब आप 2018 में "नैविगेशन एक्टिएंस.सेट (...)" के बजाय "StackAction.reset (...)" का उपयोग करते हैं, तो reactnavigation.org/docs/en/stack-actions.html

— Manuel

"इंडेक्स: 1" का उपयोग करते समय अपरिभाषित की कुंजी नहीं पढ़ सकते। तो इस त्रुटि को ठीक करने के लिए मैं "इंडेक्स: 0" का उपयोग करता हूं। मुझे लगता है कि यह समझ में आता है

— मौरिसियो पादरीनी

एपीआई की तरह लगता है कि फिर से सुधार हुआ है, कम से कम v5 में अब उस रीसेट कार्रवाई करने का एक छोटा तरीका है: reactnavigation.org/docs/navigation-prop#reset

— AndyO

Answer 2

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

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

अधिक informations दस्तावेज़ीकरण की जाँच करें । और निश्चित रूप से आप बैक बटन को सेटिंग headerLeft: nullमें छिपा सकते हैंnavigationOptions

Comments

आप प्रतिस्थापन का उपयोग कर पास नहीं कर सकते।

— दीपक पाठक

Answer 3

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

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

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

Comments

iOS पर आप स्क्रीन के किनारे से वापस पॉप करने के लिए स्लाइड कर सकते हैं। नेविगेशन स्थिति को रीसेट करना निश्चित रूप से आवश्यक है।

— कैमरोनमोरो

Answer 4

हमें gesturesEnabledसाथ-साथ झूठ को स्थापित करने की आवश्यकता headerLeftहै null। क्योंकि हम स्क्रीन को स्वाइप करके भी वापस नेविगेट कर सकते हैं।

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

Answer 5

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

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

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

Comments

यह केवल Android है।

— जियोर्जियोड

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-beta.9

navigationOptions:  {
   headerLeft: null
}

Answer 8

इस स्थिति को संभालने के लिए सबसे अच्छा विकल्प रिएक्ट नेविगेशन द्वारा प्रदान स्विचनविगेटर का उपयोग करना है । SwitchNavigator का उद्देश्य केवल एक बार में एक स्क्रीन दिखाना है। डिफ़ॉल्ट रूप से, यह वापस क्रियाओं को संभालता नहीं है और जब आप दूर जाते हैं तो यह उनकी डिफ़ॉल्ट स्थिति में मार्गों को रीसेट करता है। यह वही व्यवहार है जो प्रमाणीकरण प्रवाह में आवश्यक है।

यह इसे लागू करने का एक विशिष्ट तरीका है।

1. 2 स्टैक नेविगेटर बनाएँ: प्रमाणीकरण के लिए एक (साइन इन, साइन अप, पासवर्ड भूल गए, आदि) और मुख्य एपीपी के लिए एक और
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>
    );
  }
}

एक बार जब आप SwitchNavigator में रूट बदलते हैं तो यह पुराने रूट को स्वचालित रूप से हटा देता है और इसलिए यदि आप बैक बटन दबाते हैं तो यह आपको ऑर्बिट / लॉगिन स्क्रीन पर नहीं ले जाएगा

Answer 9

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

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

Answer 10

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 11

बस कर रहा है

headerLeft: null

जब तक आप इस उत्तर को पढ़ते हैं, तब तक उसे निकाला जा सकता है। आपको निम्नलिखित का उपयोग करना चाहिए

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

Answer 12

टाइपस्क्रिप्ट के साथ नवीनतम संस्करण रिएक्ट नेविगेशन 5 के लिए:

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

Answer 13

ReactNavigation v 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रूप में bellow में जोड़ सकते हैं

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},
}