Wyłącz przycisk Wstecz w nawigacji reagowania

Korzystam z natywnej nawigacji React (React-Navigation) StackNavigator. zaczyna się od strony logowania przez cały cykl życia aplikacji. Nie chcę mieć opcji powrotu, wracając do ekranu logowania. Czy ktoś wie, jak można to ukryć na ekranie po ekranie logowania? Swoją drogą, ukrywam to również na ekranie logowania za pomocą:

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

1) Aby przycisk Wstecz znikał w React-navigation v2 lub nowszej:

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

2) Jeśli chcesz wyczyścić stos nawigacji:

Zakładając, że jesteś na ekranie, z którego chcesz nawigować:

Jeśli używasz reaktora nawigacji w wersji 5 lub nowszej , możesz użyć navigation.resetlub 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' }],
});

Źródło i więcej informacji tutaj: https://reactnavigation.org/docs/navigation-prop/#reset

Lub:

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

Źródło i więcej informacji tutaj: https://reactnavigation.org/docs/navigation-actions/#reset

W przypadku starszych wersji React-Navigation:

użycie v2-v4StackActions.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 useNavigationActions.reset

3) W przypadku Androida musisz również wyłączyć przycisk powrotu sprzętu za pomocą BackHandler :

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

lub jeśli chcesz użyć hooków:

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

w przeciwnym razie aplikacja zostanie zamknięta po naciśnięciu przycisku Wstecz sprzętowego systemu Android, jeśli stos nawigacji jest pusty.

Czy rozważałeś użycie this.props.navigation.replace( "HomeScreen" )zamiast this.props.navigation.navigate( "HomeScreen" ).

W ten sposób nie dodajesz niczego do stosu. więc HomeScreen nie przesunie niczego, do czego można wrócić, jeśli przycisk Wstecz zostanie naciśnięty w systemie Android lub ekran zostanie przesunięty w prawo w systemie IOS.

Więcej informacji w Dokumentacji . I oczywiście można ukryć przycisk wstecz poprzez ustawienie headerLeft: nullwnavigationOptions

Możesz ukryć przycisk Wstecz za pomocą left:null, ale w przypadku urządzeń z systemem Android nadal jest w stanie wrócić, gdy użytkownik naciśnie przycisk Wstecz. Musisz zresetować stan nawigacji i ukryć przycisk za pomocąleft:null

Oto dokumentacja dotycząca resetowania stanu nawigacji: https://reactnavigation.org/docs/navigators/navigation-actions#Reset

To rozwiązanie działa react-navigator 1.0.0-beta.7, ale left:nullnie działa już w najnowszej wersji.

Musimy ustawić fałsz na gesturesEnabledwraz z headerLeftdo null. Ponieważ możemy nawigować z powrotem, przesuwając również ekran.

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

używanie BackHandlera z React Native zadziałało dla mnie. Po prostu uwzględnij ten wiersz w swoim ComponentWillMount:

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

wyłączy przycisk Wstecz na urządzeniu z systemem Android.

sam znalazłem;) dodając:

  left: null,

wyłącz domyślny przycisk Wstecz.

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

wersje re-navigation> = 1.0.0-beta.9

navigationOptions:  {
   headerLeft: null
}

Najlepszym rozwiązaniem w tej sytuacji jest użycie SwitchNavigatora dostarczanego przez nawigację React . Celem SwitchNavigator jest wyświetlanie tylko jednego ekranu na raz. Domyślnie nie obsługuje akcji wstecz i resetuje trasy do ich stanu domyślnego, gdy się przełączasz. Dokładnie takie zachowanie jest wymagane w przepływie uwierzytelniania.

Jest to typowy sposób realizacji.

1. Utwórz 2 nawigatory stosu: jeden do uwierzytelniania (logowanie, rejestracja, zapomnienie hasła itp.), A drugi do głównej aplikacji
2. Utwórz ekran, na którym sprawdzisz, którą trasę z nawigatora przełączników chcesz wyświetlić (zwykle sprawdzam to na ekranie powitalnym, sprawdzając, czy token jest przechowywany w pamięci Async)

Oto implementacja kodu powyższych instrukcji

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

Teraz w SplashScreen sprawdzisz token i odpowiednio nawigujesz

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

Po zmianie tras w SwitchNavigator automatycznie usuwa starszą trasę, a zatem jeśli naciśniesz przycisk Wstecz, nie przeniesie Cię już do ekranów autoryzacji / logowania

Możemy to naprawić, ustawiając headerLeft na null

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

SwitchNavigator byłoby drogą do osiągnięcia tego. SwitchNavigatorresetuje trasy domyślne i odmontowuje ekran uwierzytelniania po navigatewywołaniu akcji.

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

Gdy użytkownik przejdzie do SignInScreen i wprowadzi swoje poświadczenia, możesz zadzwonić

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

Po prostu robię

headerLeft: null

może zostać uznana za przestarzałą do czasu przeczytania tej odpowiedzi. Powinieneś użyć następujących

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

Najnowsza wersja React Navigation 5 z Typescriptem:

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

ReactNavigation v 5.0 - opcja stosu:

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

Myślę, że jest to proste, po prostu dodaj headerLeft : null, używam React-Native CLI, więc oto przykład:

static navigationOptions = {
    headerLeft : null
};

W przypadku najnowszej wersji React Navigation, nawet jeśli używasz null w niektórych przypadkach, może nadal wyświetlać napisane „wstecz”!

Przejdź do tego w swojej głównej aplikacji.js pod swoim pseudonimem lub po prostu przejdź do pliku klasy i dodaj: -

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

W najnowszej wersji (v2) działa headerLeft:null. Możesz dodać kontroler navigationOptionsjak poniżej

static navigationOptions = {
    headerLeft: null,
};

Dla wersji React-navigation 4.x

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

headerLeft: null

To nie zadziała w najnowszej wersji natywnej React

Powinno być:

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

W przypadku maszynopisu:

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