无法使用堆栈导航设置底部选项卡导航

Question

我同时使用堆栈导航和底部选项卡导航在我的应用程序中导航

Stack Navigation 基本上是这样设置的：

欢迎屏幕 --> SignInScreen <--> SignUpScreen --> 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>
    );
}

Answer 1

快速查看，您似乎使用了两次 HomeScreen，这与 HomeScreen 的导入冲突，请考虑为选项卡导航器变量使用不同的名称。

无法使用堆栈导航设置底部选项卡导航

Unable to Set up Bottom Tab Navigation with Stack Navigation

javascript

reactjs

react-native

react-native-navigation

react-navigation