小编典典

我如何通过React Navigation访问Redux Store？

reactjs

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

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

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

所以

我在用户 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，dispatch”。如果导航器应保持自己的状态，请不要通过导航道具。

我尝试了什么

我把所有筹码都放了

“抽屉，堆栈，BottomTabs”

里面一个文件“类组件”，它的工作，但正如@Drew所说的那样，这样做不是一个好主意:)

如果您想查看这是一个要点文件

阅读 272

2020-07-22

共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);

演示

2020-07-22