Отключить кнопку "Назад" в реакции навигации

Я использую реакцию на родной навигации (реакция-навигация) StackNavigator. он начинается со страницы входа в течение всего жизненного цикла приложения. Я не хочу иметь обратно вариант, вернувшись на экран входа в систему. Кто-нибудь знает, как он может быть скрыт на экране после экрана входа в систему? Кстати, я также скрываю его на экране входа в систему, используя:

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

Ответ 1

Для версии реакции-навигации v2 или новее

чтобы кнопка возврата исчезла:

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

Если вы также хотите очистить стек навигации, вы можете сделать что-то вроде этого (при условии, что вы находитесь на экране, с которого хотите перейти):

использовать StackActions.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);

Более подробная информация здесь: https://reactnavigation.org/docs/en/stack-actions.html

Для Android вы также должны отключить аппаратную кнопку возврата с помощью BackHandler:

fooobar.com/questions/503885/...

Если стек навигации пуст, приложение закроется при нажатии кнопки "назад" на устройстве Android.

Примечание: В старой среагировать-навигации v1 NavigationActions.reset использовали вместо StackActions.reset.

Ответ 2

Скрыть кнопку "Назад" можно с помощью left:null, но для устройств Android он все еще может вернуться, когда пользователь нажимает кнопку "Назад". Вам нужно reset состояние навигации и скрыть кнопку с помощью left:null

Вот документы для сброса состояния навигации: https://reactnavigation.org/docs/navigators/navigation-actions#Reset

Это решение работает для react-navigator 1.0.0-beta.7, однако left:null больше не работает для последней версии.

Ответ 3

Рассматривали ли вы использование this.props.navigation.replace( "HomeScreen" ) вместо this.props.navigation.navigate( "HomeScreen" ).

Таким образом, вы ничего не добавляете в стек. так что HomeScreen ничего не поменяет, чтобы вернуться к нему, если кнопка возврата нажата в Android или экран сместился вправо в IOS.

Более подробную информацию смотрите в документации. И, конечно, вы можете скрыть кнопку "Назад", установив headerLeft: null в navigationOptions

Ответ 4

Нам нужно установить false для gesturesEnabled вместе с headerLeft в null. Потому что мы можем вернуться назад, проводя по экрану, а также.

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

Ответ 5

нашел сам;) добавив:

  left: null,

отключить кнопку возврата по умолчанию.

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

Ответ 6

версии реакции-навигации> = 1.0.0-бета .9

navigationOptions:  {
headerLeft: null}

Ответ 7

использование BackHandler от реагировать на родной работал для меня. Просто включите эту строку в ваш ComponentWillMount:

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

это отключит кнопку "Назад" на устройстве Android.

Ответ 8

Мы можем это исправить, установив headerLeft в null

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

Ответ 9

В последней версии (v2) работает headerLeft:null. Вы можете добавить в контроллер navigationOptions как показано ниже

static navigationOptions = {
    headerLeft: null,
  };

Ответ 10

Для последней версии React Navigation, даже если в некоторых случаях вы используете null, все равно может быть написано "назад"!

Перейдите к этому в вашем главном app.js под вашим псевдонимом или просто перейдите в файл класса и добавьте: -

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

Ответ 11

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

Ответ 12

я думаю, что это просто, просто добавьте headerLeft: null, я использую реагировать родной Cli, так что это пример:

static navigationOptions = {
        headerLeft : null
    };

Ответ 13

если это конфигурация по умолчанию для StackNavigator, перейдите в StackNavigator.js:

defaultNavigationOptions: {header: null,},