Skip to main content
Version: 7.x

屏幕选项

每个屏幕都可以配置有关如何在导航器中渲染的各个方面，通过指定某些选项来渲染它，例如堆栈导航器中的标题标题、底部选项卡导航器中的选项卡栏图标等。不同的导航器支持不同的选项集。

¥Each screen can configure various aspects about how it gets presented in the navigator that renders it by specifying certain options, for example, the header title in stack navigator, tab bar icon in bottom tab navigator etc. Different navigators support different set of options.

在基础知识文档的 配置标题栏 部分中，我们解释了其工作原理的基础知识。另请参阅 屏幕选项 分辨率指南 以了解它们在存在多个导航器时如何工作。

¥In the configuring the header bar section of the fundamentals documentation we explain the basics of how this works. Also see the screen options resolution guide to get an idea of how they work when there are multiple navigators.

有关如何将 TypeScript 与 screenOptions 和 options 结合使用的更多信息，请参阅 我们的文档。

¥See our docs to learn more about how to use TypeScript with screenOptions and options.

有 3 种指定屏幕选项的方法：

¥There are 3 ways of specifying options for screens:

Screen 上的 options 属性​

¥options prop on Screen

你可以将名为 options 的 prop 传递给 Screen 组件来配置屏幕，你可以在其中为该屏幕指定具有不同选项的对象：

¥You can pass a prop named options to the Screen component to configure a screen, where you can specify an object with different options for that screen:

const Stack = createNativeStackNavigator({
  screens: {
    Home: {
      screen: HomeScreen,
      options: {
        title: 'Awesome app',
      },
    },
    Profile: {
      screen: ProfileScreen,
      options: {
        title: 'My profile',
      },
    },
  },
});

const Navigation = createStaticNavigation(Stack);

export default function App() {
  return <Navigation />;
}
Try on Snack

你还可以将函数传递给 options。该函数将接收该屏幕的 navigation 对象 和 route 对象，以及 theme 对象。如果你想在选项中执行导航，这会很有用：

¥You can also pass a function to options. The function will receive the navigation object and the route object for that screen, as well as the theme object. This can be useful if you want to perform navigation in your options:

const Stack = createNativeStackNavigator({
  screens: {
    Home: {
      screen: HomeScreen,
      options: ({ navigation }) => ({
        title: 'Awesome app',
        headerLeft: () => {
          <DrawerButton onPress={() => navigation.toggleDrawer()} />;
        },
      }),
    },
  },
});

Group 上的 screenOptions 属性​

¥screenOptions prop on Group

你可以将名为 screenOptions 的 prop 传递给 Group 组件来配置组内的屏幕，你可以在其中指定具有不同选项的对象。screenOptions 中指定的选项适用于组中的所有屏幕。

¥You can pass a prop named screenOptions to the Group component to configure screens inside the group, where you can specify an object with different options. The options specified in screenOptions apply to all of the screens in the group.

示例：

¥Example:

const Stack = createNativeStackNavigator({
  groups: {
    App: {
      screenOptions: {
        headerStyle: {
          backgroundColor: '#FFB6C1',
        },
      },
      screens: {
        Home: ScreenWithButton('Home', 'Profile'),
        Profile: ScreenWithButton('Profile', 'Settings'),
      },
    },
    Modal: {
      screenOptions: {
        presentation: 'modal',
      },
      screens: {
        Settings: ScreenWithButton('Settings', 'Share'),
        Share: ScreenWithButton('Share'),
      },
    },
  },
});
Try on Snack

与 options 类似，你也可以将函数传递给 screenOptions。该函数将接收每个屏幕的 navigation 对象 和 route 对象。如果你想根据路由在一个位置配置所有屏幕的选项，这会很有用：

¥Similar to options, you can also pass a function to screenOptions. The function will receive the navigation object and the route object for each screen. This can be useful if you want to configure options for all the screens in one place based on the route:

const Stack = createNativeStackNavigator({
  screens: {
    Home: HomeScreen,
    Profile: ProfileScreen,
  },
  groups: {
    Modal: {
      screenOptions: {
        presentation: 'modal',
        headerLeft: () => <CancelButton onPress={navigation.goBack} />,
      },
      screens: {
        Settings: Settings,
        Share: Share,
      },
    },
  },
});

导航器上的 screenOptions 属性​

¥screenOptions prop on the navigator

你可以将名为 screenOptions 的 prop 传递给导航器组件，你可以在其中指定具有不同选项的对象。screenOptions 中指定的选项适用于导航器中的所有屏幕。因此，这是指定要为整个导航器配置的选项的好地方。

¥You can pass a prop named screenOptions to the navigator component, where you can specify an object with different options. The options specified in screenOptions apply to all of the screens in the navigator. So this is a good place to specify options that you want to configure for the whole navigator.

示例：

¥Example:

const Stack = createNativeStackNavigator({
  screenOptions: {
    headerStyle: {
      backgroundColor: 'papayawhip',
    },
  },
  screens: {
    Home: HomeScreen,
    Profile: ProfileScreen,
  },
});

与 options 类似，你也可以将函数传递给 screenOptions。该函数将接收每个屏幕的 navigation 对象 和 route 对象。如果你想根据路由在一个位置配置所有屏幕的选项，这会很有用：

¥Similar to options, you can also pass a function to screenOptions. The function will receive the navigation object and the route object for each screen. This can be useful if you want to configure options for all the screens in one place based on the route:

const Tab = createBottomTabNavigator({
  screenOptions: ({ route }) => ({
    tabBarIcon: ({ color, size }) => {
      const icons = {
        Home: 'home',
        Profile: 'account',
      };

      return (
        <MaterialCommunityIcons
          name={icons[route.name]}
          color={color}
          size={size}
        />
      );
    },
  }),
  screens: {
    Home: EmptyScreen,
    Profile: EmptyScreen,
  },
});
Try on Snack

¥navigation.setOptions method

navigation 对象有一个 setOptions 方法，可让你从组件内更新屏幕的选项。详细信息请参见 导航对象的文档。

¥The navigation object has a setOptions method that lets you update the options for a screen from within a component. See navigation object's docs for more details.

<Button onPress={() => navigation.setOptions({ title: 'Updated!' })}>
  Update options
</Button>