Question

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

有什么办法可以做到这一点？预先感谢。

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

Answer 2

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

setStackRoot(componentId, params)

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

来源：react-native-navigation docs

Answer 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中的用户信息。如果应用程序找到用户信息，它将设置主页和应用程序其余部分的根。如果该应用程序找不到用户信息，则会将根目录设置为登录/注册堆栈，然后循环继续进行。

我希望这会有所帮助！

Answer 4

两个屏幕均使用“反应导航”中的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返回

4 个答案: