Question

我目前正在开发一个反应原生的移动应用程序。对于某些场景，我感到有点混淆导航堆栈，例如：

用户已成功登录并重定向至主屏幕
用户经历购物流程，如选择产品，去购物车，结账，直到完成交易，然后再次返回主屏幕。

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

我应该使用哪种导航库？

Answer 1

React-Navigation是推荐的图书馆，尤其适合初学者。

对于第一种情况，使用React-Navigation，您只需要使用其navigate方法（params是可选参数）：
```
this.props.navigation.navigate('home', params: { some: 'data' }); // ;
```

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

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)

这会将您重定向到＆＃34; Home＆＃34;页面作为堆栈中唯一没有后退按钮的页面。

如果您需要导航到＆＃34; Home＆＃34;的另一页顶部;页面，您只需要向action数组添加另一个相同的值，就像这样（params仍然是可选的）

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 prop表示要向用户显示的action数组中的路径索引，这意味着如果action数组中有2个项目， index: 1，用户将重定向到第一条路线顶部的第二条路线。 在顶部表示后退按钮会指向它。

您可以添加尽可能多的路由到action数组，因为您希望将它们叠加在一起。

重置导航堆栈或阻止返回上一屏幕更好吗？

1 个答案: