如何将选项卡导航器与堆栈导航器嵌套在react native中

Question

晚上好，

我成功地在react native中创建了一个项目，现在我想用我的堆栈导航器嵌套我的选项卡导航器。当我将选项卡导航器与堆栈导航器放在一起时，会出现错误。我的标签导航代码是：

function MyTabs() {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Earnings" component={EarningsScreen} />
</Tab.Navigator>
);
}
function Root() {
return (
<NavigationContainer>
<MyTabs/>
</NavigationContainer>
);

我的堆栈导航器代码是：

function MyStack() {
return (
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Notifications" component={NotificationsScreen} />
<Stack.Screen name="Profile" component={ProfileScreen} />
<Stack.Screen name="Settings" component={SettingsScreen} />
</Stack.Navigator>
);
}
export default function App() {
return (
<NavigationContainer>
<MyStack />
</NavigationContainer>
);
}

Answer 1

看起来您使用了两个独立的NavigationContainers，并且根本没有嵌套导航器；每个的代码都是完全独立的。

考虑到您的问题是需要堆栈中的选项卡，请尝试以下操作：

• 删除根组件(应用程序中应该只有一个NavigationContainer(
• 使用MyTabs组件作为堆栈屏幕之一

示例：

function MyTabs() {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Earnings" component={EarningsScreen} />
</Tab.Navigator>
);
}
function MyStack() {
return (
<Stack.Navigator>
{/* Tabs are inserted here */}
<Stack.Screen name="Tabs" component={MyTabs} />
<Stack.Screen name="Notifications" component={NotificationsScreen} />
<Stack.Screen name="Profile" component={ProfileScreen} />
<Stack.Screen name="Settings" component={SettingsScreen} />
</Stack.Navigator>
);
}
export default function App() {
return (
<NavigationContainer>
<MyStack />
</NavigationContainer>
);
}