Wyłącz przycisk Wstecz w nawigacji reagowania

85

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
})
EyalS
źródło

Odpowiedzi:

202

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.

Florin Dobre
źródło
4
Spowoduje to usunięcie przycisku Wstecz, ale w Androidzie nadal możemy nawigować za pomocą przycisku Wstecz urządzenia. Czy jest sposób, aby to również wyłączyć?
Gokul Kulkarni
2
Jesteś królem
Dimitris Filippou
3
A kiedy jesteś w 2018 roku, użyj „StackAction.reset (...)” zamiast „NavigationActions.reset (...)”, zobacz Reagnavigation.org/docs/en/stack-actions.html
Manuel
1
„Nie można odczytać klucza o wartości undefined”, gdy używany jest parametr „index: 1”. Aby naprawić ten błąd, używam "index: 0". Myślę, że to ma sens
Mauricio Pastorini
1
Wygląda na to, że interfejs API został ponownie ulepszony, przynajmniej w wersji 5 jest teraz krótszy sposób na wykonanie tej akcji resetowania: Reactnavigation.org/docs/navigation-prop#reset
AndyO
35

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

Tarik Chakur
źródło
nie można przekazać parametrów za pomocą zamiany.
Deepak Pathak
17

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.

JXLai
źródło
5
w systemie iOS możesz nadal przesuwać się od krawędzi ekranu, aby cofnąć się. Zresetowanie stanu nawigacji jest zdecydowanie potrzebne.
cameronmoreau
17

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,
}
Gavidi Harikrishna
źródło
9

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.

OsamaD
źródło
To jest tylko Android.
georgiosd
4

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,
      }
    },
  },
EyalS
źródło
4

wersje re-navigation> = 1.0.0-beta.9

navigationOptions:  {
   headerLeft: null
}
Vaibhav KB
źródło
3

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

Hadi Mir
źródło
2

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

static navigationOptions =({navigation}) => {
    return {
        title: 'Rechercher une ville',
        headerLeft: null,
    }  
}
Klaudia Brysiewicz
źródło
1

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');
Scott Davis
źródło
1

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 : () => {},
    }
Mohammad Sadiq
źródło
1

Najnowsza wersja React Navigation 5 z Typescriptem:

<Stack.Screen
    name={Routes.Consultations}
    component={Consultations}
    options={{headerLeft: () => null}}
  />
YACINE
źródło
1

ReactNavigation v 5.0 - opcja stosu:

options={{
headerLeft: () => { 
 return <></>; 
}
}}
Ganjargal Bolor
źródło
W odpowiedzi zawsze opisz, co robisz. Powinien zostać zaktualizowany lub usunięty. Przeczytaj Jak odpowiedzieć, zanim
udzielisz
0

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
};
Cevin Ways
źródło
0

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: " "
}
Rishav Kumar
źródło
0

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

static navigationOptions = {
    headerLeft: null,
};
tarikul05
źródło
0

Dla wersji React-navigation 4.x

navigationOptions: () => ({
      title: 'Configuration',
      headerBackTitle: null,
      headerLayoutPreset:'center',
      headerLeft: null
    })
Lovekush Vishwakarma
źródło
0
headerLeft: null

To nie zadziała w najnowszej wersji natywnej React

Powinno być:

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

W przypadku maszynopisu:

navigationOptions = {
 headerLeft:()=>{return null},
}
asim mehmood
źródło