React原生expo:Tab导航器设置初始屏幕

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。我稍后会添加图标

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

感谢您的帮助

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>