javascript - 返回特定屏幕而不是第一个屏幕 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

从 React Native 导入 BackHandler，

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

看到这个，

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 中绑定(bind)