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事件中使用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);

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

2 个答案: