如何使用 React 导航访问 redux 商店？

Question

我有应用程序“音乐应用程序”，供两个用户输入“访客，用户注册”

我有一个底部导航器，当访客打开我的应用程序时，我只想渲染 4 个底部选项卡“主页、浏览、搜索、广播”。

但是当用户登录/注册时，我想渲染 5 个选项卡（之前的选项卡加上“Library”选项卡）。

所以

我在用户register\login时分派操作，并将 isLogin 状态从false更改为true并执行一些操作，例如向我的抽屉添加一些其他数据，看起来不错，

我想访问react-navigation文件“ Tabs.js ”中的redux存储，

我想访问状态，mapStateToProps但无法this.props.isLogin从非类组件访问！

所以我不知道如果我不使用类组件我该怎么做！

那么有没有办法使用 Tabs.js 文件中的“connect HOC”来访问 redux 存储？

代码

Tabs.js 文件

import {connect} from 'react-redux';
import {store} from '../redux/store/store';

const LoginTabs = createBottomTabNavigator({....}); // For user '5 tabs'

const notLoginTabs = createBottomTabNavigator({....}); // For Guest '4 tabs'



const App = this.props.isLogin ? LoginTabs : notLoginTabs; // Not work i know :P

export default (createAppContainer(App));

编辑德鲁·里斯的答案

当我尝试以这种方式执行此操作时，我收到了错误消息

const mapStateToProps = state => {
  console.log('state', state);
  return {
    isLogin: state.user.isLogin,
  };
};

const App = ({isLogin, ...props}) =>
  isLogin ? <LoginTabs {...props} /> : <NotLoginTabs {...props} />;
const Root = createAppContainer(App);

export default connect(mapStateToProps)(Root);

错误信息

该导航器同时具有导航和容器属性，因此尚不清楚它是否应该拥有自己的状态。如果导航器应从导航道具获取其状态，则删除道具：“isLogin，dispatch”。如果导航器应保持其自己的状态，请不要传递导航道具。

我尝试过的

我把所有的堆栈

“抽屉、堆栈、底部标签”

在一个文件“类组件”内，它可以工作，但正如 @Drew 所说，以这种方式执行它不是一个好主意:)

如果你想查看的话，这里有一个要点文件

Answer 1

您需要创建动态路由，以及一个根据用户是否登录来呈现选项卡的组件。中Tabs.js执行以下操作。

const loginRoutes = {
  Home: {
    screen: Home,
    navigationOptions: {
      title: 'Home',
    },
  },
  Browse: {
    screen: Browse,
    navigationOptions: {
      title: 'Browse',
    },
  },
  Search: {
    screen: Search,
    navigationOptions: {
      title: 'Search',
    },
  },
  Radio: {
    screen: Radio,
    navigationOptions: {
      title: 'Radio',
    },
  },
  Library: {
    screen: Library,
    navigationOptions: {
      title: 'Library',
    },
  },
}

const noLoginRoutes = {
  Home: {
    screen: Home,
    navigationOptions: {
      title: 'Home',
    },
  },
  Browse: {
    screen: Browse,
    navigationOptions: {
      title: 'Browse',
    },
  },
  Search: {
    screen: Search,
    navigationOptions: {
      title: 'Search',
    },
  },
  Radio: {
    screen: Radio,
    navigationOptions: {
      title: 'Radio',
    },
  }
}

const mapStateToProps = state => {
  return {
    isLogin: state.user.isLogin,
 };
};


 const AppNav = ({ isLogin }) => {
  const Container = createAppContainer(
    createDrawerNavigator(
      {
        ...drawerRoutes,
        App: createStackNavigator(
          {
            ...routes,
            Tabs: createBottomTabNavigator(
              isLogin ? loginRoutes : noLoginRoutes
            ),
          },
          routesConfig
        ),
      },
      drawerConfig
    )
  );

  return <Container />;
};

export default connect(mapStateToProps)(AppNav);

演示版