重置导航堆栈还是阻止返回上一个屏幕更好？ [关闭]

Question

我目前正在开发一个带有 react native 的移动应用程序。对于某些场景，我对导航堆栈感到有些困惑，例如：

1. 用户成功登录并重定向到主屏幕
2. 用户经历了选择产品、进入购物车、结帐等购物流程，直到完成交易，然后再次返回主屏幕。

哪个更好？重置导航堆栈，或者只是设计屏幕以防止返回（Android 上的返回按钮，或 iOS 中的平移手势）？

我应该使用什么导航库？

Answer 1

React-Navigation 是一个推荐的库，尤其是对于初学者。

1. 对于第一种情况，使用 React-Navigation，你只需要像这样使用它的navigate 方法（params 是一个可选参数）：

   this.props.navigation.navigate('home', params: { some: 'data' }); // ;
   

2. 对于第二种情况，您需要使用reset 操作，然后像这样使用dispatch 方法调度它（参数是可选的，在这种情况下，我们只需传递当前路由的现有参数，我们从中正在重定向）：

   import { NavigationActions } from 'react-navigation'
   
   const resetAction = NavigationActions.reset({
     index: 0,
     actions: [
       NavigationActions.navigate({ routeName: 'Home', params: this.props.navigation.state.params })
     ]
   })
   this.props.navigation.dispatch(resetAction)
   

这会将您重定向到“主页”页面，这是堆栈中唯一没有后退按钮的页面。

如果您需要导航到“主页”页面顶部的另一个页面，您只需向action 数组添加另一个相同的值，就像这样（参数仍然是可选的）

import { NavigationActions } from 'react-navigation'

    const resetAction = NavigationActions.reset({
      index: 1,
      actions: [
        NavigationActions.navigate({ routeName: 'Home', params: this.props.navigation.state.params }),
        NavigationActions.navigate({ routeName: 'AnotherPage', params: this.props.navigation.state.params })
      ]
    })
    this.props.navigation.dispatch(resetAction)

请记住，index 属性表示action 数组中的路线索引，您希望将其显示给用户，这意味着如果您在action 数组和index: 1 中有 2 个项目，则用户将被重定向到第一条路线之上的第二条路线。 在顶部表示后退按钮将通向它。

您可以将尽可能多的路由添加到action 数组，只要您想将它们堆叠在一起。