如何在 React Native Navigation 中使用 StackNavigator 避免错误代码

Question

我刚开始学习 React Native，在我的导航中我注意到一些我认为是代码味道的东西，我想知道，我如何才能让它变得更好。

所以我正在使用 react-navigation 和 StackNavigator。我确实有一些视图，您必须连续导航，例如 View1 -> View2 -> View 3 等。但是要从 View2 导航到 View3，我通常会在参数中传递导航项，所以我能够在其他视图中再次访问它。所以我通常会得到这样的代码：

navigateToDetailPage() {
    const {navigation} = this.props.navigation.state.params;

    navigation.navigate('GameSessionDetailPage', {
        navigation: navigation
    });
}

到目前为止，我还没有使用 Redux，因为我想先了解基础知识。但在这种情况下，我应该将 navigation 放入 redux 存储中吗？据我了解，redux 应该反映您的应用程序状态，而不是一个大的 data/object 转储。但我觉得我正在进入一长串 "navigation object passing" ，这对我来说似乎很脆弱而且很耦合。你们有推荐的最佳做法吗？

Answer 1

您不需要通过导航对象。它将自动添加到下一个组件道具

navigateToDetailPage() {
    const {navigation} = this.props;

    navigation.navigate('GameSessionDetailPage');
}

然后在 GameSessionDetailPage 你将有 this.props.navigation 可用。

这里不用Redux

如何在 React Native Navigation 中使用 StackNavigator 避免错误代码

How to avoid bad Code with StackNavigator in React Native Navigation

navigation

react-native

react-navigation