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

【问题标题】：How to navigate to a specific screen and disallow going back with react-native-navigation如何导航到特定屏幕并禁止使用 react-native-navigation 返回
【发布时间】：2019-02-22 14:59:07
【问题描述】：

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

有什么方法可以实现吗？提前致谢。

【问题讨论】：

有什么解决办法吗？请在此处提供您的答案

标签： react-native react-native-navigation

【解决方案1】：

反应导航 您可以像这样重置堆栈：

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

【讨论】：

谢谢，但我使用的是react-native-navigation，所以这在这种情况下没有用。
如果您查看 BackHandler 的文档，您会发现它仅适用于 Android。我正在寻找适用于 Android 和 iOS 的解决方案。
我不是 ios 用户，但据我所知 ios 没有物理后退按钮，所以你很久没有创建虚拟后退按钮了，你应该没问题。（再次我我不是 ios 用户，所以我可能 100% 错）

【解决方案2】：

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

setStackRoot(componentId, params)

如果有必要，也许你必须popToRoot(componentId, mergeOptions?)。

来源：react-native-navigation docs

【讨论】：

【解决方案3】：

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

尝试将以下内容添加到您的 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 的用户信息。如果应用程序找到用户信息，它会为主页和应用程序的其余部分设置根目录。如果应用没有找到用户信息，它会将根设置为登录/注册堆栈并继续循环。

我希望这会有所帮助！

【讨论】：

【解决方案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);

【讨论】：

我正在使用react-native-navigation，因此该解决方案对我不利。