react-navigation如何监听返回操作?



  • 我想实现的是一个带登录功能的APP,现在代码是这样的:

    
    const tabNavigatorConfig  = {
      initialRouteName: 'Home',
      headerMode: 'screen',
      mode:'modal',
      tabBarPosition :'bottom',
      swipeEnabled: false,
    };
    
    const MainNavigator = TabNavigator({
      Home: {
        screen: Home,
      },
    }, tabNavigatorConfig)
    
    
    export default StackNavigator({
      Login: { screen: Login },
      MainNavigator: { screen: MainNavigator }
    }, {
      initialRouteName: 'Login',
      headerMode: 'none',
      mode :'modal',
      backBehavior:'none',
    })
    
    

    不知道以上这样实现Login 界面是否合理。我就是遇到一个问题,就是当登录成功,进入MainNavigator之后 ,如何才能不再返回到Login界面?

    就是当我们在android上时,登录成功,进入Home之后 ,如果一直按返回键,会返回到Login。

    请问大家,有没有哪些结合 react-navigation - mobx 的带登录功能的demo项目可以让我参考参考啊?初学rn感觉还是不太适应。



  • 好好理解一下state的用途,你就会知道这个问题应该怎么解决了。



  • 我也遇到这个问题,你是怎么解决的?



  • @yk 说:

    有没有哪些结合 react-navigation - mobx 的带登录功能的demo项目可以让我参考参考啊?初学rn感觉还是不太
    直接把首页定位第一个界面,没登录的时候也能理论,点操作的时候没登录就跳登录,登录成功就运行下面的,然后就把其他界面都推出navigator,我是这么操作的
    0_1495702639148_image.png



  • 你可以在option中设置禁止返回键,
    gesturesEnabled:false,
    react-navigation返回操作:xxx.navigation.navigate('xxx',{callback:(data)=>{alert(data)}})
    在xxx,你执行
    this.props.navigation.state.params.callback(返回值);
    this.props.navigation.goBack();


登录后回复