我有两个用户的应用程序“ Music App”,输入“来宾,用户已注册”
我有一个用于这些的底部导航器,当Guest打开我的应用程序时,我只想呈现4个底部选项卡“主页,浏览,搜索,广播”。
但是,当用户登录/注册时,我想先渲染5个标签,再加上“库”标签。
所以
我在用户 register \ login 时调度动作,并将isLogin状态从 false 更改为 true, 并进行一些操作,例如将一些其他数据添加到我的抽屉中,看起来还不错,
我想访问react-navigation文件“ Tabs.js* ” 内的 redux存储 , *
我想从中访问状态,mapStateToProps但不能this.props.isLogin从非类组件访问状态!
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所说的那样,这样做不是一个好主意:)
如果您想查看这是一个要点文件
您需要创建动态路由,并创建一个组件,该组件根据用户是否登录来呈现选项卡。在Tabs.js执行以下操作。
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);
演示