react-native - 如何隐藏登录屏幕中的底部选项卡导航？

Question

我想隐藏登录页面中的底部标签栏并将其显示到其他屏幕，我怎样才能实现这一点？现在登录屏幕上有底部标签栏，我想将其删除并在登录后显示它。如果有人知道如何操作，请提供帮助。我从这个答案中得到了一些想法React Native: How to hide bottom bar before login and show it once the user is logged in?但我不知道如何检查用户是否登录!我如何将它从登录屏幕传递到 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/