如何在登录屏幕中隐藏底部选项卡导航

Question

我想隐藏登录页面中的底部选项卡栏，并将其显示给其他屏幕，我该如何实现这一点？现在在登录屏幕的底部有一个标签栏，我想删除它，并在登录后显示它。如果有人知道如何做到这一点，请帮助。我从这个答案中得到了一些想法React Native：如何在登录前隐藏底部栏，并在用户登录后显示它？但我不知道如何检查用户是否登录！如何将它从登录屏幕传递到app.js？

这是我的app.js

import { createStackNavigator } from "react-navigation-stack";
import { createAppContainer, createSwitchNavigator} from "react-navigation";
import LoginScreen from './src/screens/login';
import Orders from './src/screens/home';
import TransactionScreen from './src/screens/transactionScreen';
import Logout from './src/screens/footer';
import { Icon } from "react-native-elements";
import * as React from "react";
import { View, Image, Text, ActivityIndicator ,SafeAreaView,StatusBar,Alert} from "react-native";
import { createBottomTabNavigator } from 'react-navigation-tabs';
import AsyncStorage from "@react-native-community/async-storage";

// const Apps = createStackNavigator({
//   LoginScreen: { screen: LoginScreen },
//   Home :{
//     screen:Home
//   },
//   TransactionScreen:{
//     screen:TransactionScreen,
//     navigationOptions: {
//       headerTitle: "Transactions",
//       headerStyle: {
//         backgroundColor: "white",
//       },
//       headerTintColor: "black",
//     },
//   }
// });
// const App = createAppContainer(Apps);
// export default App;
class IconWithBadge extends React.Component {
render() {
const { name, badgeCount, color, size,type } = this.props;
return (
<View style={{ width: 24, height: 24 }}>
<Icon name={name} size={size} type={type} color={color} />
</View>
);
}
}
const getTabBarIcon = (navigation, focused, tintColor) => {
const { routeName } = navigation.state;
let IconComponent = Icon;
let iconName;
let type =null;
if (routeName === "Orders") {
iconName = `kitchen`;
} else if (routeName === "Transactions") {
iconName = `account-balance`;
} else if (routeName === "Logout") {
iconName = `settings`;
type="font-awesome"
} 
// You can return any component that you like here!
return <IconWithBadge name={iconName} type={type} color={tintColor} />;
};
const AuthStack = createStackNavigator({
LoginScreen: { screen: LoginScreen },
});
const RootStack = createBottomTabNavigator(
{
Orders: { screen: Orders },
Transactions: { screen: TransactionScreen },
Logout: { 
screen: Logout,
navigationOptions:({navigation}) => ({
tabBarOnPress:(scene, jumpToIndex) => {
return Alert.alert(
"Confirmation Required",
'Do you want to logout?',
[
{text:"Yes", onPress: ()=>{AsyncStorage.clear(); navigation.navigate('Auth')}},
{text:"Cancel"}
]

)
}
})
}
}, 
{
defaultNavigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, tintColor }) =>
getTabBarIcon(navigation, focused, tintColor),
}),
tabBarOptions: {
// initialRouteName: "FirstScreen",
activeTintColor: "yellow",
activeBackgroundColor: "#023333",
inactiveTintColor: "white",
inactiveBackgroundColor: "#023333",
upperCaseLabel: true,
showIcon: true,
barStyle: { backgroundColor: "#fff" },
lazy: false,
},
}
);
class AuthLoadingScreen extends React.Component{
constructor(props){
super(props);
this._loadData();

}
_loadData = async() =>{
const isLoggedIn = await AsyncStorage.getItem('isLoggedIn');
this.props.navigation.navigate(isLoggedIn !== '1'? 'Auth' : 'App');
}
render(){
return(
<SafeAreaView style={{flex:1,justifyContent:'center',alignItems:'center'}}>
<StatusBar barStyle="dark-content"/>
<ActivityIndicator/>
</SafeAreaView>
);
}
}
export default createAppContainer(createSwitchNavigator(
{
AuthLoading: AuthLoadingScreen,
App:RootStack,
Auth:AuthStack
},
{
initialRouteName:'AuthLoading'
}
))

Answer 1

看起来您正在使用导航堆栈和导航选项卡。

为此，我有一个解决方案。然后做一个这样的结构。

import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {createStackNavigator} from '@react-navigation/stack';

如果要显示底部导航。创建这样的选项卡屏幕功能。

function HomeTabs() {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={Home} />
<Tab.Screen name="Feed" component={Feed} />
<Tab.Screen name="Notifications" component={Notifications} />
</Tab.Navigator>
);
}

然后调用导航容器。

<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Home"
component={HomeTabs}
/>
<Stack.Screen
name="Login"
component={LoginScreen}
/>
<Stack.Screen
name="Signup"
component={SignupScreen}
/>
)}
</Stack.Navigator>
</NavigationContainer>

在重新组织导航结构后，现在如果我们导航到登录或注册屏幕，选项卡栏将不再在屏幕上可见。

参考：https://reactnavigation.org/docs/hiding-tabbar-in-screens/