我想在用户登录应用后显示底部的栏。目前正在显示应用启动时间。
这是我的底栏代码:
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文档