Question

我正在使用react native和react导航。我试图创建一个嵌套的导航器，即我试图将一个标签导航器放置在堆栈导航器中。但是，当我在iOS模拟器上运行该应用程序时，主屏幕将无限重载。以下代码可能有什么问题？新来的本地人反应...如果这很简单，请和我一起承担！

下面是我做嵌套的代码部分：

 import React from 'react';
 import Home from './routes/Home'
 import Alert from './routes/Alert'
 import Profile from './routes/Profile'
 import Subs from './routes/Subs'
 import Write from './routes/Write'
 import OtherProfile from './routes/OtherProfile'
 import Post from './routes/Post'
 import { NavigationContainer } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { SafeAreaView } from 'react-native-safe-area-context';

 export default function App() {
   const MainStack = createStackNavigator();
   const Tab = createBottomTabNavigator();

   function HomeTab() {
     return (
       <Tab.Navigator>      
         <Tab.Screen name="Home" component={Home}/>
         <Tab.Screen name="Subs" component={Subs}/>
         <Tab.Screen name="Write" component={Write} options={{ tabBarVisible: false }}/>
         <Tab.Screen name="Alert" component={Alert}/>
         <Tab.Screen name="Profile" component={Profile}/>
       </Tab.Navigator>
     )
   }

   function MainStackScreen() {
     return (
       <MainStack.Navigator>
         <MainStack.Screen name="HomeTab" component={HomeTab} options = {{ headerShown: false }} />
         <MainStack.Screen name="Post" component={Post} />
         <MainStack.Screen name="OtherProfile" component={OtherProfile} />
       </MainStack.Navigator>
     )
   }

   return (
   <NavigationContainer>
     <SafeAreaView style={{flex:1}}>
         <MainStackScreen/>
     </SafeAreaView>
   </NavigationContainer>
   )
 }

Answer 1

发布此答案后立即找到答案。我在App组件之外声明了导航器和导航组件，并且可以正常工作。

反应导航：使用嵌套导航器时是否无限重载主屏幕？

1 个答案: