1) Чтобы кнопка назад исчезла в react-navigation v2 или новее:
navigationOptions: {
title: 'MyScreen',
headerLeft: null
}
2) Если вы хотите очистить стек навигации:
Предполагая, что вы находитесь на экране, с которого хотите перейти:
Если вы используете версию response-navigation v5 или новее, вы можете использовать navigation.reset
или CommonActions.reset
:
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,
actions: [
NavigationActions.navigate({ routeName: 'myRouteWithDisabledBackFunctionality' }),
],
});
this.props.navigation.dispatch(resetAction);
v1 использованиеNavigationActions.reset
3) Для Android вам также придется отключить аппаратную кнопку возврата с помощью BackHandler :
http://reactnative.dev/docs/backhandler.html
или если вы хотите использовать хуки:
https://github.com/react-native-community/hooks#usebackhandler
в противном случае приложение закроется при нажатии кнопки возврата на аппаратном уровне Android, если стек навигации пуст.
Рассматривали ли вы использование
this.props.navigation.replace( "HomeScreen" )
вместоthis.props.navigation.navigate( "HomeScreen" )
.Таким образом, вы ничего не добавляете в стек. поэтому HomeScreen не будет ничего делать, чтобы вернуться, если кнопка «Назад» нажата в Android или экран проведен вправо в IOS.
Дополнительную информацию смотрите в документации . И, конечно же, вы можете скрыть кнопку «Назад», установив
headerLeft: null
вnavigationOptions
источник
Нам нужно установить false
gesturesEnabled
вместе сheaderLeft
tonull
. Потому что мы можем вернуться назад, проводя пальцем по экрану.navigationOptions: { title: 'Title', headerLeft: null, gesturesEnabled: false, }
источник
Вы можете скрыть кнопку "Назад" с помощью
left:null
, но для устройств Android она все еще может вернуться, когда пользователь нажимает кнопку "Назад". Вам нужно сбросить состояние навигации и скрыть кнопку с помощьюleft:null
Вот документы для сброса состояния навигации:
https://reactnavigation.org/docs/navigation-actions#reset
Это решение работает
react-navigator 1.0.0-beta.7
, ноleft:null
больше не работает для последней версии.источник
использование BackHandler от react native сработало для меня. Просто включите эту строку в свой ComponentWillMount:
BackHandler.addEventListener('hardwareBackPress', function() {return true})
он отключит кнопку возврата на устройстве Android.
источник
нашел сам;) добавив:
left: null,
отключите кнопку возврата по умолчанию.
const MainStack = StackNavigator({ Login: { screen: Login, navigationOptions: { title: "Login", header: { visible: false, }, }, }, FirstPage: { screen: FirstPage, navigationOptions: { title: "FirstPage", header: { left: null, } }, },
источник
версии реакции-навигации> = 1.0.0-beta.9
navigationOptions: { headerLeft: null }
источник
Лучший вариант справиться с этой ситуацией - использовать SwitchNavigator, предоставляемый React navigation. . Цель SwitchNavigator - отображать только один экран за раз. По умолчанию он не обрабатывает обратные действия и сбрасывает маршруты до состояния по умолчанию при переключении. Это именно то поведение, которое требуется в процессе аутентификации.
Это типичный способ его реализации.
Вот реализация кода вышеуказанных операторов
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', } ) );
Теперь в SplashScreen вы проверите токен и выполните соответствующую навигацию.
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> ); } }
источник
Мы можем исправить это, установив для headerLeft значение null
static navigationOptions =({navigation}) => { return { title: 'Rechercher une ville', headerLeft: null, } }
источник
Для последней версии React Navigation 5 с Typescript:
<Stack.Screen name={Routes.Consultations} component={Consultations} options={{headerLeft: () => null}} />
источник
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', } ));
После того, как пользователь перейдет на экран SignInScreen и введет свои учетные данные, вы должны позвонить
this.props.navigation.navigate('App');
источник
Просто делаю
headerLeft: null
может устареть к тому времени, когда вы прочтете этот ответ. Вы должны использовать следующие
navigationOptions = { headerTitle : "Title", headerLeft : () => {}, }
источник
ReactNavigation v 5.0 - вариант стека:
options={{ headerLeft: () => { return <></>; } }}
источник
Я думаю, что это просто добавить
headerLeft : null
, я использую реагирующий cli, поэтому это пример:static navigationOptions = { headerLeft : null };
источник
Для последней версии React Navigation, даже если вы используете null, в некоторых случаях он все равно может отображать «назад» написанное!
Сделайте это в своем основном app.js под своим экранным именем или просто перейдите в свой файл класса и добавьте: -
static navigationOptions = { headerTitle:'Disable back Options', headerTitleStyle: {color:'white'}, headerStyle: {backgroundColor:'black'}, headerTintColor: 'red', headerForceInset: {vertical: 'never'}, headerLeft: " " }
источник
В последней версии (v2) работает
headerLeft:null
. вы можете добавить контроллер,navigationOptions
как показано нижеstatic navigationOptions = { headerLeft: null, };
источник
Для react-navigation версии 4.x
navigationOptions: () => ({ title: 'Configuration', headerBackTitle: null, headerLayoutPreset:'center', headerLeft: null })
источник
headerLeft: null
Это не будет работать в последней версии React Native.
Должен быть:
navigationOptions = { headerLeft:()=>{}, }
Для машинописного текста:
navigationOptions = { headerLeft:()=>{return null}, }
источник
В React-Navigation версии 5.x это можно сделать так:
import { CommonActions } from '@react-navigation/native'; navigation.dispatch( CommonActions.reset({ index: 1, routes: [ { name: 'Home' }, { name: 'Profile', params: { user: 'jane' }, }, ], }) );
Вы можете прочитать здесь .
источник