Deaktivieren Sie die Zurück-Schaltfläche in der Reaktionsnavigation

Ich verwende React Native Navigation (React-Navigation) StackNavigator. Es beginnt auf der Anmeldeseite während des gesamten Lebenszyklus der App. Ich möchte keine Zurück-Option haben und zum Anmeldebildschirm zurückkehren. Weiß jemand, wie es nach dem Anmeldebildschirm auf dem Bildschirm ausgeblendet werden kann? Übrigens verstecke ich es auch im Anmeldebildschirm mit:

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

1) So verschwinden die Zurück-Schaltfläche in React-Navigation v2 oder neuer:

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

2) Wenn Sie den Navigationsstapel bereinigen möchten:

Angenommen, Sie befinden sich auf dem Bildschirm, von dem aus Sie navigieren möchten:

Wenn Sie verwenden reagieren Navigations Version v5 oder höher können Sie verwenden , navigation.resetoder 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' }],
});

Quelle und weitere Informationen hier: https://reactnavigation.org/docs/navigation-prop/#reset

Oder:

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

Quelle und weitere Informationen hier: https://reactnavigation.org/docs/navigation-actions/#reset

Für ältere Versionen von React-Navigation:

v2-v4 verwendenStackActions.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 verwendenNavigationActions.reset

3) Für Android müssen Sie auch die Hardware-Zurück-Schaltfläche mit dem BackHandler deaktivieren :

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

oder wenn Sie Haken verwenden möchten:

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

Andernfalls wird die App beim Drücken der Android-Hardware-Zurück-Taste geschlossen, wenn der Navigationsstapel leer ist.

Haben Sie darüber nachgedacht, this.props.navigation.replace( "HomeScreen" )statt zu verwenden this.props.navigation.navigate( "HomeScreen" ).

Auf diese Weise fügen Sie dem Stapel nichts hinzu. Der HomeScreen winkt also nicht, wenn der Zurück-Button in Android gedrückt oder der Bildschirm in IOS nach rechts gewischt wird.

Weitere Informationen finden Sie in der Dokumentation . Und natürlich können Sie die Zurück - Taste verbergen , indem Sie headerLeft: nullinnavigationOptions

Sie können die Zurück-Taste mit ausblenden left:null, aber für Android-Geräte kann sie immer noch zurückgehen, wenn der Benutzer die Zurück-Taste drückt. Sie müssen den Navigationsstatus zurücksetzen und die Schaltfläche mit ausblendenleft:null

Hier sind die Dokumente zum Zurücksetzen des Navigationsstatus: https://reactnavigation.org/docs/navigators/navigation-actions#Reset

Diese Lösung funktioniert für react-navigator 1.0.0-beta.7, jedoch left:nullnicht mehr für die neueste Version.

Wir müssen false gesturesEnabledzusammen mit headerLeftto setzen null. Weil wir zurück navigieren können, indem wir auch über den Bildschirm wischen.

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

Die Verwendung des BackHandlers von React Native hat bei mir funktioniert. Fügen Sie diese Zeile einfach in Ihren ComponentWillMount ein:

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

Es wird die Zurück-Taste auf dem Android-Gerät deaktivieren.

fand es selbst;) Hinzufügen:

  left: null,

Deaktivieren Sie die Standard-Zurück-Schaltfläche.

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

React-Navigation-Versionen> = 1.0.0-beta.9

navigationOptions:  {
   headerLeft: null
}

Die beste Option, um mit dieser Situation umzugehen, ist die Verwendung von SwitchNavigator, der von React Navigation bereitgestellt wird . Der Zweck von SwitchNavigator besteht darin, immer nur einen Bildschirm gleichzeitig anzuzeigen. Standardmäßig werden keine Rückaktionen ausgeführt, und Routen werden beim Wechseln in den Standardzustand zurückgesetzt. Dies ist das genaue Verhalten, das im Authentifizierungsablauf benötigt wird.

Dies ist ein typischer Weg, um es zu implementieren.

1. Erstellen Sie zwei Stack-Navigatoren: einen für die Authentifizierung (Anmelden, Anmelden, Passwort vergessen usw.) und einen für die Haupt-APP
2. Erstellen Sie einen Bildschirm, in dem Sie überprüfen, welche Route vom Switch-Navigator angezeigt werden soll (normalerweise überprüfe ich dies im Begrüßungsbildschirm, indem ich überprüfe, ob ein Token im Async-Speicher gespeichert ist).

Hier ist eine Code-Implementierung der obigen Anweisungen

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

Jetzt überprüfen Sie in SplashScreen das Token und navigieren entsprechend

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

Sobald Sie Routen in SwitchNavigator ändern, wird die ältere Route automatisch entfernt. Wenn Sie also die Zurück-Taste drücken, gelangen Sie nicht mehr zu den Authentifizierungs- / Anmeldebildschirmen

Wir können das Problem beheben, indem wir headerLeft auf null setzen

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

Der SwitchNavigator wäre der Weg, um dies zu erreichen. SwitchNavigatorSetzt die Standardrouten zurück und hebt die Bereitstellung des Authentifizierungsbildschirms auf, wenn die navigateAktion aufgerufen wird.

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

Nachdem der Benutzer zum SignInScreen gegangen ist und seine Anmeldeinformationen eingegeben hat, würden Sie anrufen

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

Einfach machen

headerLeft: null

Möglicherweise ist es veraltet, wenn Sie diese Antwort lesen. Sie sollten Folgendes verwenden

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

Für die neueste Version React Navigation 5 mit Typoskript:

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

ReactNavigation v 5.0 - Stapeloption:

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

Ich denke, es ist einfach, fügen Sie einfach hinzu headerLeft : null, ich verwende React-Native Cli, also ist dies das Beispiel:

static navigationOptions = {
    headerLeft : null
};

Selbst wenn Sie in einigen Fällen null verwenden, wird für die neueste Version von React Navigation möglicherweise "zurück" geschrieben angezeigt!

Gehen Sie dazu in Ihrer Haupt-App.js unter Ihrem Bildschirmnamen oder gehen Sie einfach zu Ihrer Klassendatei und fügen Sie hinzu: -

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

In der neuesten Version (v2) funktioniert headerLeft:null. Sie können Controller navigationOptionsals unten hinzufügen

static navigationOptions = {
    headerLeft: null,
};

Für React-Navigation Version 4.x.

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

headerLeft: null

Dies funktioniert in der neuesten nativen React-Version nicht

Es sollte sein:

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

Für Typoskript:

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