我如何通过反应导航访问redux存储？

Question

我有两个用户的应用程序“ Music App”，输入“来宾，已注册用户”

我有一个用于这些的底部导航器，当Guest打开我的应用程序时，我只想呈现四个底部选项卡“主页，浏览，搜索，广播”。

但是当用户登录/注册时，我想先渲染5个标签，再加上“库”标签。

SO

我在用户register \ login时调度操作，并将isLogin状态从false更改为true，并进行一些操作，例如将一些其他数据添加到我的抽屉中，看起来还不错，] >

我想访问react-navigation文件“ Tabs.js

”，]中的redux存储，

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

所以我不知道如果不使用Class组件怎么办！

因此，有没有一种方法可以使用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，调度”，如果导航器应从导航中获取其状态支柱。如果导航器应保持自己的状态，请不要通过导航道具。

我尝试过的

我把所有筹码都放了

“抽屉，纸叠，底部标签”

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

如果要查看，这里是gist文件

我有两个用户的应用程序“音乐应用程序”，键入“来宾，一个注册的用户”，我为那些用户提供了一个底部导航器，当Guest打开我的应用程序时，我只希望呈现四个底部选项卡“主页，浏览，搜索，广播” 。 ...

Answer 1

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

Answer 2

我认为您打算将App制成组件。在这种情况下，它将是一个功能组件，因此没有this，并且您还需要返回有效的JSX。