无法使用堆栈导航设置底部标签导航

问题描述

我同时使用堆栈导航和底部标签导航在我的应用程序内部进行导航

堆栈导航基本上是这样设置的：

WelcomeScreen-> SignInScreen SignUpScreen-> HomeScreen

现在，我想使用底部标签导航在我的HomeScreen和MyGamesScreen之间进行导航

主屏幕 MyGamesScreen

我要显示“底部选项卡导航器”的唯一屏幕是在HomeScreen和MyGamesScreen中。

我尝试了一些教程，而最后一次尝试是查看Nesting Navigators上的“文档”页面，但是它对我来说不起作用。我要么让我的“底部标签导航器”显示在所有页面中，要么不显示任何页面。

这是我的 App.js ，目前在主屏幕中未显示我的“底部标签”导航器。我尝试将函数名称切换为“ HomeScreen”以解决该问题，如文档所示，但这给了我一个错误，说“ HomesScreen”已被声明。

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


import LoadingScreen from '/Users/toxnd/Documents/MaisJogo/MaisJogoApp/screens/LoadingScreen'
import WelcomeScreen from '/Users/toxnd/Documents/MaisJogo/MaisJogoApp/screens/WelcomeScreen'
import SignInScreen from '/Users/toxnd/Documents/MaisJogo/MaisJogoApp/screens/SignInScreen'
import SignUpScreen from '/Users/toxnd/Documents/MaisJogo/MaisJogoApp/screens/SignUpScreen'
import HomeScreen from '/Users/toxnd/Documents/MaisJogo/MaisJogoApp/screens/HomeScreen'
import MyGamesScreen from '/Users/toxnd/Documents/MaisJogo/MaisJogoApp/screens/WelcomeScreen'


const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();

export function Home() {

  return (
    
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name='Meus Jogos' component={MyGamesScreen} />
    </Tab.Navigator>

    );
}


export default function App() {


  return (
<NavigationContainer>
      <Stack.Navigator
      initialRouteName="Loading"
      screenOptions={{
        headerStyle: {
          backgroundColor: '#BB2CD9',},headerTintColor: '#fff',headerTitleStyle: {
          fontWeight: 'bold',}}>
        
        <Stack.Screen
          options={{headerShown: false}}
              name='Loading' component={LoadingScreen} />
          
        <Stack.Screen
          options={{ headerShown: false }}
              name='Welcome' component={WelcomeScreen} />
          
        <Stack.Screen
          options={{headerShown: false}}
              name="Sign In" component={SignInScreen} />
          
        <Stack.Screen
          options={{ headerShown: false }}
        name='Sign Up' component={SignUpScreen} /> 
      
       <Stack.Screen name="Home" component={HomeScreen} />

      </Stack.Navigator>
      </NavigationContainer>
    );
}

解决方法

快速浏览一下，您好像两次使用过HomeScreen，这与导入HomeScreen时发生冲突，请为制表符导航器变量考虑一个不同的名称。