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

87

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

const MainStack = StackNavigator({
  Login: {
    screen: Login,
    navigationOptions: {
      title: "Login",
      header: {
        visible: false,
      },
    },
  },
  // ... other screens here
})
EyalS
источник

Ответы:

209

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, если стек навигации пуст.

Флорин Добре
источник
4
Это приведет к удалению кнопки возврата, но в Android мы по-прежнему можем перемещаться с помощью кнопки возврата устройства. Есть ли способ отключить и это?
Гокул Кулкарни
2
Ты король
Димитрис
3
А когда вы в 2018 году используйте StackAction.reset (...) вместо NavigationActions.reset (...), см. Responsenavigation.org/docs/en/stack-actions.html
Мануэль
1
«Невозможно прочитать ключ неопределенного значения» при использовании «index: 1». Поэтому, чтобы исправить эту ошибку, я использую «index: 0». Я думаю, это имеет смысл
Маурисио Пасторини
1
Похоже, что API снова улучшился, по крайней мере, в версии 5 теперь есть более короткий способ выполнить это действие сброса: reactnavigation.org/docs/navigation-prop#reset
AndyO
36

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

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

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

Тарик Чакур
источник
вы не можете передавать параметры с помощью replace.
Дипак Патхак
18

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

navigationOptions:  {
   title: 'Title',
   headerLeft: null,
   gesturesEnabled: false,
}
Гавиди Харикришна
источник
17

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

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

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

JXLai
источник
6
на iOS вы все еще можете скользить от края экрана, чтобы вернуться назад. Сброс состояния навигации обязательно нужен.
Cameronmoreau
11

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

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

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

OsamaD
источник
Это только Android.
georgiosd
4

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

  left: null,

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

const MainStack = StackNavigator({
  Login: {
    screen: Login,
    navigationOptions: {
      title: "Login",
      header: {
        visible: false,
      },
    },
  },
  FirstPage: {
    screen: FirstPage,
    navigationOptions: {
      title: "FirstPage",
      header: {
        left: null,
      }
    },
  },
EyalS
источник
4

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

navigationOptions:  {
   headerLeft: null
}
Вайбхав КБ
источник
3

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

Хади Мир
источник
2

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

static navigationOptions =({navigation}) => {
    return {
        title: 'Rechercher une ville',
        headerLeft: null,
    }  
}
Клаудиа Брисевич
источник
2

Для последней версии React Navigation 5 с Typescript:

<Stack.Screen
    name={Routes.Consultations}
    component={Consultations}
    options={{headerLeft: () => null}}
  />
ЯСИН
источник
1

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');
Скотт Дэвис
источник
1

Просто делаю

headerLeft: null

может устареть к тому времени, когда вы прочтете этот ответ. Вы должны использовать следующие

   navigationOptions = {
        headerTitle : "Title",
        headerLeft : () => {},
    }
Мохаммад Садик
источник
1

ReactNavigation v 5.0 - вариант стека:

options={{
headerLeft: () => { 
 return <></>; 
}
}}
Гянджаргал Болор
источник
Пожалуйста, всегда описывайте в своем ответе, что вы делаете. Его следует обновить или удалить. Прочтите Как ответить, прежде чем давать больше ответов ^^
finnmglas
0

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

static navigationOptions = {
    headerLeft : null
};
Cevin Ways
источник
0

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

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

static navigationOptions = {
   headerTitle:'Disable back Options',
   headerTitleStyle: {color:'white'},
   headerStyle: {backgroundColor:'black'},
   headerTintColor: 'red',
   headerForceInset: {vertical: 'never'},
   headerLeft: " "
}
Ришав Кумар
источник
0

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

static navigationOptions = {
    headerLeft: null,
};
tarikul05
источник
0

Для react-navigation версии 4.x

navigationOptions: () => ({
      title: 'Configuration',
      headerBackTitle: null,
      headerLayoutPreset:'center',
      headerLeft: null
    })
Лавекуш Вишвакарма
источник
0
headerLeft: null

Это не будет работать в последней версии React Native.

Должен быть:

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

Для машинописного текста:

navigationOptions = {
 headerLeft:()=>{return null},
}
Асим мехмуд
источник
0

В React-Navigation версии 5.x это можно сделать так:

import { CommonActions } from '@react-navigation/native';

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

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

Анкур Кедиа
источник