react-native - React Native:如何在登录前隐藏底部栏并在用户登录后显示?
问题描述
我想在用户登录应用程序后显示底部栏。目前它在应用程序启动时显示。
这是我的底栏代码:
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import React from 'react';
const TabNavigator = createBottomTabNavigator(
{
HOME: { screen: HomeStack },
SEARCH: { screen: SearchStack },
ADDMORE: { screen: AddMoreStack },
USER: { screen: UserStack },
ME: { screen: ProfileStack },
},
{
defaultNavigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, tintColor }) => {
const { routeName } = navigation.state;
let iconName;
if (routeName === 'HOME') {
iconName = require('./Images/tab_home.png');
iconNameFocused = require('./Images/tab_home_selected.png');
} else if (routeName === 'SEARCH') {
iconName = require('./Images/tab_search.png');
iconNameFocused = require('./Images/tab_search_selected.png');
} else if (routeName === 'ADDMORE') {
iconName = require('./Images/tab_add_more.png');
iconNameFocused = require('./Images/tab_add_more_selected.png');
} else if (routeName === 'USER') {
iconName = require('./Images/tab_Users.png');
iconNameFocused = require('./Images/tab_Users_selected.png');
} else if (routeName === 'ME') {
iconName = require('./Images/tab_me.png');
iconNameFocused = require('./Images/tab_me_selected.png');
}
if(focused)
return ( <Image style={{width: 20, height: 20, tintColor }} source={iconNameFocused} /> );
else
return ( <Image style={{width: 20, height: 20, tintColor }} source={iconName} /> );
},
}),
tabBarPosition: 'bottom',
tabBarOptions: {
activeTintColor: '#ca375e',
inactiveTintColor: '#c7c7c7',
},
animationEnabled: false,
swipeEnabled: false,
}
);
const App = createAppContainer(TabNavigator);
export default App;
如何在初始页面中隐藏它并在用户登录后显示它?
解决方案
先做一个访客导航器
const GuestNavigator = createStackNavigator({
LoginScreen,
SignupScreen,
});
在 createAppContainer 中的 addSwitchNavigator 之后
const createRootNavigator = (signedIn = false) =>
createAppContainer(
createSwitchNavigator(
{
SignedIn: {
screen: TabNavigator,
},
SignedOut: {
screen: GuestNavigator,
},
},
{
initialRouteName: signedIn ? 'SignedIn' : 'SignedOut',
},
));
return createRootNavigator;
更多检查SwitchNavigator文档
推荐阅读
- accessibility - 何时在具有背景图像的部分上使用 ARIA IMG 角色
- server - 如何不拉伸我放在 draw.io 中服务器机架内的形状?
- java - 向数组中输入元素
- html - How to place bootstrap dropdown menu button in page-header on the right site?
- maven - Sbt - maven 父级等价物
- terraform - 如何为每周重复的数据狗停机时间设置停机时间
- java - 如何插入文件作为参数
- java - 我应该使用什么数据结构(java)来存储一组字符串及其标准形式?
- html - 我们如何使用 html 或 uni 代码在 gmail 中创建印度卢比 (INR) 符号?
- ios - 防止 iOS 应用内购买中的试用期欺诈