小编典典

我如何通过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所说的那样,这样做不是一个好主意:)

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


阅读 264

收藏
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