React native 选项卡和堆栈导航器在同一屏幕上

当我通过按钮导航到选项卡时，会显示选项卡导航器和堆栈导航器；但是，当我通过选项卡导航器导航到堆栈导航器时，只显示堆栈导航器。当我按下堆栈导航器屏幕时，如何同时显示选项卡导航器和堆栈导航器？我的应用程序模块：

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

function TabNavigator() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="User" component={UserDetailScreen} />
      <Stack.Screen name="Feed" component={FeedScreen} />
    </Tab.Navigator>
  )
}

function MyStack() {
  return (
    <Stack.Navigator initialRouteName='Logout'>
      <Stack.Screen name="Logout" component={LoginScreen} />
      <Stack.Screen name="User" component={TabNavigator} />
      <Stack.Screen name="UserForm" component={UserFormScreen} />
      <Stack.Screen name="ItemForm" component={ItemFormScreen} />
      <Stack.Screen name="Swap" component={SwapDetailScreen} />
    </Stack.Navigator>
  );
}

export default function App() {
  console.log("test");
  console.log(UserDetailScreen);
  return (
    <NavigationContainer>
      <MyStack />
    </NavigationContainer>
  );
}

const Stack=createStackNavigator（）；
const Tab=createBottomTabNavigator（）；
函数TabNavigator（）{
返回(
)
}
函数MyStack（）{
返回(
);
}
导出默认函数App（）{
控制台日志（“测试”）；
日志（UserDetailScreen）；
返回(
);
}

选项卡栏仅在您位于选项卡导航内时可见。在您的情况下，这是UserDetailScreen或FeedScreen。为了同时显示TabNav和StackNav，您需要相应地更改嵌套

StackNav
 - LoginScreen // no TabBar displayed
 - TabNav
   - UserDetailScreen
   - FeedScreen
 - UserFormScreen // no TabBar displayed
 - ItemFormScreen // no TabBar displayed
 - SwapDetailScreen // no TabBar displayed

解决方案A:将StackNav放入选项卡（推荐）：

提示：如果您希望登录时不使用选项卡，可以将其从任何导航器中排除：

- LoginScreen
- TabNav
  -StackNav // e.g. all user related screens
   - UserDetailScreen
   - UserFormScreen
  -StackNav // e.g. all feed related screens
   - FeedScreen
   - ItemFormScreen
   - SwapDetailScreen

在代码中，您可以执行以下操作（伪代码）：

在代码中，您可以执行以下操作（伪代码）：

。。。
}>
...
const CustomTabBar=（{navigation}）=>{
返回(
{navigation.navigate（'UserScreen'）}
/>
)
}
...
函数getScreenStack（）{
返回(
TabBar仅在您位于TabNav内部时可见。在您的情况下，这是UserDetailScreen或FeedScreen。为了同时显示TabNav和StackNav，您需要相应地更改嵌套

StackNav
 - LoginScreen // no TabBar displayed
 - TabNav
   - UserDetailScreen
   - FeedScreen
 - UserFormScreen // no TabBar displayed
 - ItemFormScreen // no TabBar displayed
 - SwapDetailScreen // no TabBar displayed

解决方案A:将StackNav放入选项卡（推荐）：

提示：如果您希望登录时不使用选项卡，可以将其从任何导航器中排除：

- LoginScreen
- TabNav
  -StackNav // e.g. all user related screens
   - UserDetailScreen
   - UserFormScreen
  -StackNav // e.g. all feed related screens
   - FeedScreen
   - ItemFormScreen
   - SwapDetailScreen

在代码中，您可以执行以下操作（伪代码）：

在代码中，您可以执行以下操作（伪代码）：

。。。
}>
...
const CustomTabBar=（{navigation}）=>{
返回(
{navigation.navigate（'UserScreen'）}
/>
)
}
...
函数getScreenStack（）{
返回(
为什么您的
FeedScreen
使用
而不是
Tab.Screen/>

   <Tab.Navigator>
      <Tab.Screen name="User" component={UserDetailScreen} />
      <Stack.Screen name="Feed" component={FeedScreen} />
    </Tab.Navigator>



我对此感到困惑，这可能是问题所在。
为什么您的
FeedScreen
使用
而不是
Tab.Screen/>

   <Tab.Navigator>
      <Tab.Screen name="User" component={UserDetailScreen} />
      <Stack.Screen name="Feed" component={FeedScreen} />
    </Tab.Navigator>



我对此感到困惑，这可能是问题所在

   <Tab.Navigator>
      <Tab.Screen name="User" component={UserDetailScreen} />
      <Stack.Screen name="Feed" component={FeedScreen} />
    </Tab.Navigator>