如何导航到特定屏幕并禁止返回react-native-navigation

Question

我正在使用react-native-navigation，我有一堆屏幕。当我从屏幕A转到屏幕B时，我不想让用户选择返回屏幕A，只需前进。我正在尝试Navigation.popTo("screen.B.id")但我收到此错误：

有没有办法实现这个目标？提前致谢。

Answer 1

React-navigation您可以像这样重置堆栈：

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

反应本地导航 解决方法是捕获后面的监听器，如下所示：

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

Answer 2

您可以尝试将屏幕B设置为新根。

setStackRoot(componentId, params)

也许你必须要popToRoot(componentId, mergeOptions?)。

资料来源：react-native-navigation docs

Answer 3

在react-native-navigation中，您可以选择2个选项来实现我认为您正在寻找的东西。

1. 尝试将以下内容添加到您选择的子组件中的topBar选项中。

backButton: {
  visible: false
}

对于一个小例子，你不想要一个后退选项的孩子：

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

2. 您可以将根导航完全重置为新屏幕。

在我看来，

选项1.是一种简单的方法，只需从特定屏幕上删除后退按钮，即可禁用返回原始屏幕的功能。

当您想要从应用程序本身的整个方程中删除前一个屏幕时，选项2很不错。

我的选项2的个人用例：我创建了一个最初打开登录/注册堆栈的应用程序。登录/注册后，我将该信息保存到AsyncStorage并将根完全重置为主页。第二次打开应用程序时，它会检查来自AsyncStorage的用户信息。如果应用程序找到用户信息，它会设置主页和应用程序其余部分的根目录。如果应用程序找不到用户信息，它会将根目录设置为登录/注册堆栈并继续循环。

我希望这有帮助！

Answer 4

从两个屏幕的“react-navigation”使用createSwitchNavigator，不会让第二个屏幕的按钮切换到第一个屏幕，并且标题也不会带有后退箭头。

在你的App.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);