it-swarm.com.de

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

Ich verwende die native Navigation (Reakti- Navigation) StackNavigator. Es beginnt auf der Anmeldeseite während des gesamten Lebenszyklus der App. Ich möchte keine Option zurück, um zum Anmeldebildschirm zurückzukehren. Weiß jemand, wie es nach dem Anmeldebildschirm auf dem Bildschirm ausgeblendet werden kann? Übrigens, ich verstecke es auch im Anmeldebildschirm mithilfe von: 

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

Für die Reakturnavigation Version v1> = 1.0.0-beta.9, um den Zurück-Button verschwinden zu lassen:

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

Wenn Sie auch den Navigationsstapel bereinigen möchten, können Sie Folgendes tun (vorausgesetzt, Sie befinden sich auf dem Bildschirm, von dem aus Sie navigieren möchten):

import { NavigationActions } from 'react-navigation';

verwenden Sie eine Funktion, um zur Zielroute zu navigieren, bei der alle hinteren Funktionen deaktiviert sind:

resetNavigation(targetRoute) {
  const resetAction = NavigationActions.reset({
    index: 0,
    actions: [
      NavigationActions.navigate({ routeName: targetRoute }),
    ],
  });
  this.props.navigation.dispatch(resetAction);
}

und rufen Sie dann an this.resetNavigation('myRouteWithDisabledBackFunctionality') wenn Sie zur Zielroute navigieren möchten

Für die Version 2 von response-navigation müssen Sie StackAction.reset(...) anstelle von NavigationActions.reset verwenden.

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

Mehr Infos hier: https://reactnavigation.org/docs/de/stack-actions.html

104
Florin Dobre

Sie können die Rücktaste mithilfe von left:null ausblenden, bei Android-Geräten kann sie jedoch weiterhin zurückkehren, wenn der Benutzer die Rücktaste drückt. Sie müssen den Navigationsstatus zurücksetzen und die Schaltfläche mit left:null ausblenden.

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 funktioniert left:null nicht mehr für die neueste Version. 

16
Echo7

Haben Sie überlegt, this.props.navigation.replace( "HomeScreen" ) anstelle von this.props.navigation.navigate( "HomeScreen" ) zu verwenden. 

Auf diese Weise fügen Sie dem Stapel nichts hinzu. Wenn Sie in Android die Zurück-Taste gedrückt haben oder der Bildschirm in IOS nach rechts gedrückt wird, wird der HomeScreen daher nicht weitergeleitet. 

Weitere Informationen finden Sie in der Dokumentation . Natürlich können Sie die Zurück-Schaltfläche ausblenden, indem Sie headerLeft: null in navigationOptions setzen.

7
Tarik Chakur

Wir müssen den Wert gesturesEnabled zusammen mit headerLeft bis null auf false setzen. Weil wir durch Wischen auf dem Bildschirm auch zurück navigieren können. 

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

habe es selbst gefunden;) 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,
      }
    },
  },
3
EyalS

reagiere die Navigationsversionen> = 1.0.0-beta.9

navigationOptions:  {
headerLeft: null}
3
Vaibhav Bacchav

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

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

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

2
OsamaD

Der SwitchNavigator wäre der Weg, dies zu erreichen. SwitchNavigator setzt die Standardrouten zurück und hebt den Authentifizierungsbildschirm auf, wenn die Aktion navigate 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, rufen Sie ihn an

this.props.navigation.navigate('App');
0
Scott Davis

In der neuesten Version (v2) funktioniert headerLeft:null. Sie können die Variable navigationOptions des Controllers unten hinzufügen

static navigationOptions = {
    headerLeft: null,
  };
0
tarikul05

ich denke, es ist einfach, fügen Sie einfach headerLeft : null hinzu, ich verwende reaktionsnative cli, also ist dies das Beispiel:

static navigationOptions = {
        headerLeft : null
    };
0
Cevin Ways

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

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

Bei der neuesten Version von React Navigation kann es vorkommen, dass in manchen Fällen auch "zurück" geschrieben wird.

Gehen Sie dazu in Ihre main app.js unter Ihrem Bildschirmnamen oder gehen Sie einfach in Ihre class-Datei und fügen Sie Folgendes hinzu: -

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