反应原生stackNavigator在嵌套导航中创建2个导航

Question

我在本机反应中使用createStackNavigator，当我在导航器内部使用导航器时，我面临多个屏幕和视图问题。

预计只会看到一个导航器 - 如图所示： 附图供击球手理解：

我使用的代码是：

import React from "react";
import { SettingsScreen } from "../../features/settings/screens/settings.screen";
import { FavouritesScreen } from "../../features/settings/screens/favourites.screen";

import {
  createStackNavigator,
  CardStyleInterpolators,
} from "@react-navigation/stack";

const SettingsStack = createStackNavigator();

export const SettingsNavigator = ({ route, navigation }) => {
  return (
    <SettingsStack.Navigator
      headerMode="screen"
      screenOptions={{
        cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
      }}
    >
      <SettingsStack.Screen
        options={{
          header: () => null,
        }}
        name="Settings"
        component={SettingsScreen}
      />

      <SettingsStack.Screen
        name="Favourites"
        component={FavouritesScreen}
      />
    </SettingsStack.Navigator>
  );
};

Answer 1

您可以配置设置屏幕以通过道具选项隐藏标题。只需将 headerShown 设置为 false 就可以了

  <SettingsStack.Screen
    options={{
       headerShown: false,
    }}
    name="Settings"
    component={SettingsScreen}
  />