将react-navigation直接连接到redux？

Question

是否可以将TabNavigator或StackNavigator直接连接到redux？

这对于有条件地导航到屏幕非常有用，这取决于Redux存储中是否存在某些条件（即，如果用户已登录或退出）。

例：

const Tabs = TabNavigator({
    screen: userIsSignedInRedux ? SignedInTabNavigator : SignedOutScreen,
  },
});

其中userIsSignedInRedux是我的Redux商店中的一个键。

Answer 1

通常可以，但不推荐，因为该方法可能存在性能问题。

React-navigation之前有关于该主题的文档，但是在最新版本中不推荐将其删除。

您可以查看以下内容：https://reactnavigation.org/docs/en/redux-integration.html

您可以将特定视图（首先在导航器中）连接到redux，如果您的用户已登录，则可以在componentWillMount方法内部重定向。

但是，如果您有一个特定的案例，如果通过redux处理可以节省您的时间，请查看此解决方案：

https://github.com/react-navigation/react-navigation-redux-helpers

Answer 2

试试这个：

import React from 'react';

const TabNavigator = ({ isLoggedIn }) => {
  const RouteConfigs = {
      Screen: isLoggedIn ? SignedInTabNavigator : SignedOutScreen
  };
  const Navigator = createBottomTabNavigator(RouteConfigs);

  return <Navigator />
};

const mapStateToProps = ({ auth }) => ({ isLoggedIn: auth.isLoggedIn });

export default connect(mapStateToProps)(TabNavigator);

但是在确定isLoggedIn的值之前不要渲染你的导航..如果没有，你会看到某种闪烁效果（SignOutScreen会被渲染，过了一会儿你会看到SignInTabNavigator如果isLoggedIn解析为true则显示）