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

问题描述

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

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

WelcomeScreen --> SignInScreen <--> SignUpScreen --> HomeScreen

现在，我想使用底部选项卡导航在我的 HomeScreen 和 MyGamesScreen 之间导航

主屏幕 <--> 我的游戏屏幕

我想显示底部选项卡导航器的唯一屏幕是 HomeScreen 和 MyGamesScreen。

我尝试了几个教程，最后一次尝试是查看Nesting Navigator上的文档页面，但它对我不起作用。我要么让我的底部选项卡导航器显示在所有页面中，要么不显示在任何页面中。

这是我的App.js，它目前没有在 HomeScreen 中显示我的底部选项卡导航器。我尝试将我的函数名称切换为“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>
    );
}

标签： javascriptreactjsreact-nativereact-navigationreact-native-navigation

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

问题描述

解决方案

推荐阅读