【问题标题】:connect a react-navigation directly to redux?将反应导航直接连接到redux?
【发布时间】:2019-03-21 09:47:33
【问题描述】:

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

这对于根据 Redux 商店中是否存在某些条件(即用户是否登录或退出)有条件地导航到屏幕非常有用。

例子:

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

其中 userIsSignedInRedux 是我的 Redux 存储中的一个键。

【问题讨论】:

    标签: reactjs react-native redux react-navigation


    【解决方案1】:

    通常可以,但不建议这样做,因为这种方法可能存在性能问题。

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

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

    您可以将特定视图(首先在导航器中)连接到 redux,并在 componentWillMount 方法中执行重定向(例如,如果您的用户已登录)。

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

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

    【讨论】:

      【解决方案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 将被渲染片刻之后,如果 isLoggedIn 解析为 true,您将看到 SignInTabNavigator 出现

      【讨论】:

      • 嘿@HendEl-Sahli,我遇到了同样的问题,我想根据用户登录状态隐藏一个选项卡所以我将一个用于用户登录的选项卡和另一个用于 gest 用户的选项卡设置为,我正在尝试将 react-navigation 路由配置文件连接到 redux 存储,但我不能:\ 所以我制作了一个类组件来处理这些东西,但我知道这是错误的方式,你能检查一下这个 question 和 cmets“特别是 gist 文件”?
      猜你喜欢
      • 1970-01-01
      • 2019-07-11
      • 2019-05-18
      • 2018-10-16
      • 1970-01-01
      • 2016-04-02
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多