javascript - React native expo：选项卡导航器设置初始屏幕

Question

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer } from '@react-navigation/native';


function LoginScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Login</Text>
    </View>

  );
}

function VideoScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Video</Text>
    </View>
  );
}

function PodcastScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Podcast</Text>
    </View>
  );
}

function TravelScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Travel</Text>
    </View>
  );
}

function InfoScreen() {
  return ( 
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Info</Text>
    </View>
  );
}


const Tab = createBottomTabNavigator();

export default function App() {
  return (

    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Video" component={VideoScreen} />
        <Tab.Screen name="Podcast" component={PodcastScreen} />
        <Tab.Screen name="Travel" component={TravelScreen} />
        <Tab.Screen name="Info" component={InfoScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

代码来自 App.js。我稍后会添加图标

我希望将登录屏幕作为用户打开应用程序时显示的第一个屏幕。当用户按下登录按钮时，它应该像现在一样打开。此外，loginScreen 不应显示在选项卡导航器上。

谢谢您的帮助

Answer 1

这可能会有所帮助

const MainTabNavigator = () => {

     return (
      <Tab.Navigator>
        <Tab.Screen name="Video" component={VideoScreen} />
        <Tab.Screen name="Podcast" component={PodcastScreen} />
        <Tab.Screen name="Travel" component={TravelScreen} />
        <Tab.Screen name="Info" component={InfoScreen} />
      </Tab.Navigator>
     );
}


<NavigationContainer>
     <Stack.Navigator>
       {Store.userToken == null ? (
         <Stack.Screen name="Login" component={LoginStackScreen} options={{ headerShown: false }} />
       ) : (
           <Stack.Screen name="MainTabNavigator" component={MainTabNavigator} options={{ headerShown: false }} />)}
     </Stack.Navigator>
</NavigationContainer>