Как перейти к определенному экрану и запретить возвращаться с реагировать на родную навигацию

Question

Я использую react-native-navigation, и у меня есть стек экранов.Когда я перехожу с экрана A на экран B, я не хочу давать пользователю возможность вернуться к экрану A, просто вперед.Я пытаюсь Navigation.popTo("screen.B.id"), но я получаю эту ошибку:

Есть ли способ добиться этого?Заранее спасибо.

Answer 1

Используйте createSwitchNavigator для «реакции-навигации» для обоих экранов, что не позволит кнопке «Назад» второго экрана переключиться на первый экран, а также не будет заголовка со стрелкой назад.

В вашем приложении.js,

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { createSwitchNavigator,createAppContainer } from 'react-navigation';

import ScreenOne from './components/ScreenOne ';
import ScreenTwo from './components/ScreenTwo ';



const App=createSwitchNavigator({
ScreenOne :{screen:ScreenOne },
ScreenTwo :{screen:ScreenTwo }
});

export default createAppContainer(App);

Answer 2

Вы можете попробовать настроить Screen B на новый корень.

setStackRoot(componentId, params)

Возможно, вам придется popToRoot(componentId, mergeOptions?), если необходимо.

Источник: реактивная документация

Answer 3

В реагирующей нативной навигации есть 2 варианта, которые вы можете выбрать, чтобы достичь того, что, как я считаю, вы ищете.

1. попробуйте добавить нижеприведенную опцию к вашему параметру topBar специально для дочернего компонента, который вы выбираете.

backButton: {
  visible: false
}

для небольшого примера, дочернего элемента, которого вы не выбираете.не хочу задний вариант для пут:

component: {
  id: 'screenB',
  name: 'screenB',
  options: {
    title: {
      text: 'screenB'
    },
    topBar: {
      // the other options you want
      backButton: {
        visible: false
      }
    }
  }
}

Вы можете полностью сбросить корневую навигацию на новый экран.

В моем мнении,

Вариант 1. - это простой способ выровнять, просто убрав кнопку возврата изспециальный экран, чтобы отключить возможность когда-либо вернуться к исходному экрану.

Вариант 2. хорош, если вы хотите удалить предыдущий экран из всего уравнения самого приложения.

Мой личный вариант использования для варианта 2: я создал приложение, которое изначально открывается в стек входа / регистрации.После входа в систему / регистрации я сохраняю эту информацию в AsyncStorage и полностью сбрасываю корень на домашнюю страницу.При повторном открытии приложения оно проверяет информацию пользователя из AsyncStorage.Если приложение находит информацию о пользователе, оно устанавливает корень для домашней страницы и остальной части приложения.Если приложение не находит информацию о пользователе, оно устанавливает корень в стек входа / регистрации и цикл продолжается.

Надеюсь, это поможет!

Answer 4

React-навигация Вы можете сбросить стек следующим образом:

const resetAction = StackActions.reset({
   index: 0,
   actions: [NavigationActions.navigate({ routeName: 'screenB' })],
});
this.props.navigation.dispatch(resetAction);

React-native-навигация
AОбходной путь будет заключаться в том, чтобы поймать заднего слушателя так:

    import {BackHandler} from 'react-native';

    export default class RoomType extends Component {
         _didFocusSubscription;
         _willBlurSubscription;
         constructor(props) {
             super(props);
             this._didFocusSubscription = props.navigation.addListener('didFocus',payload =>
                BackHandler.addEventListener('hardwareBackPress', this.onBackButtonPressAndroid)
             ); 
         }
      }
    componentDidMount() {
            this._willBlurSubscription = this.props.navigation.addListener('willBlur', payload =>
                BackHandler.removeEventListener('hardwareBackPress', this.onBackButtonPressAndroid)
            );
     }
componentWillUnmount() {
        this._didFocusSubscription && this._didFocusSubscription.remove();
        this._willBlurSubscription && this._willBlurSubscription.remove();
    }
onBackButtonPressAndroid = () => {
        //code when you press the back button
    };