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

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

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

1) Чтобы кнопка назад исчезла в react-navigation v2 или новее:

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

2) Если вы хотите очистить стек навигации:

Предполагая, что вы находитесь на экране, с которого хотите перейти:

Если вы используете версию response-navigation v5 или новее, вы можете использовать navigation.resetили 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' }],
});

Источник и дополнительная информация здесь: 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, // <-- currect active route from actions array
  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вместе с headerLeftto null. Потому что мы можем вернуться назад, проводя пальцем по экрану.

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 - отображать только один экран за раз. По умолчанию он не обрабатывает обратные действия и сбрасывает маршруты до состояния по умолчанию при переключении. Это именно то поведение, которое требуется в процессе аутентификации.

Это типичный способ его реализации.

1. Создайте 2 навигатора стека: один для аутентификации (вход, регистрация, забытый пароль и т. Д.), А другой для основного приложения.
2. Создайте экран, на котором вы будете проверять, какой маршрут из навигатора переключателей вы хотите показать (я обычно проверяю это на экране-заставке, проверяя, хранится ли токен в хранилище Async)

Вот реализация кода вышеуказанных операторов

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

После того, как вы измените маршруты в SwitchNavigator, он автоматически удалит старый маршрут и, следовательно, если вы нажмете кнопку возврата, он больше не приведет вас к экранам авторизации / входа в систему.

Мы можем исправить это, установив для 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' },
      },
    ],
  })
);

Вы можете прочитать здесь .