返回特定屏幕而不是第一个屏幕react-native-navigation

Question

当我点击后退按钮或执行this.props.navigation.goBack()时，我会回到第一个屏幕而不是第一个屏幕。

这是我的App.js是我的导航器实现：

export default class App extends React.Component {
  render() {
      const MainNavigator = createAppContainer(createBottomTabNavigator({
          info: {
          screen: CtrlInfoStart,
          navigationOptions: { tabBarVisible: false }
      },
          mascotChoice: {
          screen: CtrlMascotChoice,
          navigationOptions: { tabBarVisible: false }
      },
          optionScreen: {
          screen: CtrlOptions,
          navigationOptions: { tabBarVisible: false }
      },
          welcomeScreen: {
          screen: CtrlWelcome,
          navigationOptions: { tabBarVisible: false }
      },
          preview: {
          screen: CtrlPreviewMap,
          navigationOptions: { tabBarVisible: false }
      },
          map: {
          screen: CtrlMap,
          navigationOptions: { tabBarVisible: false }
      },
          pointOfInterest: {
          screen: CtrlPI,
          navigationOptions: { tabBarVisible: false }
      },
          quizz: {
          screen: CtrlQuizz,
          navigationOptions: { tabBarVisible: false }
      }
      }));

    return (
    <View style={styles.container}>
        <MainNavigator/>
    </View>
    );
  }
};

我使用this.props.navigation.navigate('SomeScreen');在屏幕和this.props.navigation.goBack()之间导航回去。

Answer 1

从本地反应导入BackHandler，

在componentdidmount使用backhandler绑定BackHandler.addEventListner()事件

看到这个，

componentDidmount=()=>{
    BackHandler.addEventListener("hardwareBackPress", this.handleBackButton);
}

componentWillUnmount = () => {
    BackHandler.removeEventListener("hardwareBackPress", this.handleBackButton);
};

  handleBackButton = () => {
    this.props.navigation.navigate('SomeScreen');
    return true;
  };

无论你在哪里使用goBack()改变它与navigate("ScreenName")

编辑：

对于其他屏幕上的意外行为，请执行此操作，其中使用了反向操作。

import {NavigationEvents} "react-navigation";

在第一个组件内部渲染，

<NavigationEvents onWillFocus={this.compnentDidmount} onWillBlur={this.componentWillUnmount} />

如果你在didmount和unmount中有其他逻辑，那么为两者制作单独的方法并在NavigationEvents中绑定

Answer 2

我找到了解决方案。这是我的代码：

     export default class App extends React.Component {

      render() {
        return <AppContainer />;
      }
    };

    const stackMapPI = createStackNavigator({
        Map: {
            screen: CtrlMap,
            navigationOptions: () => ({
                header: null
            })
        },
        PI: {
            screen: MainCtrlPIQuizz,
            navigationOptions: () => ({
                header: null
            })
        }

    });

    const stackNav = createStackNavigator({
        Welcome: {
            screen: MainCtrlWelcome,
            navigationOptions: () => ({
                header: null
            })
        },
        Option: {
            screen: CtrlOptions,
            navigationOptions: () => ({
                header: null
            })
        },
        Map: {
            screen: stackMapPI,
            navigationOptions: () => ({
                header: null
            })
        }
    });

const AppContainer = createAppContainer(stackNav);