Version: 6.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.

有 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:

<Stack.Navigator>
  <Stack.Screen
    name="Home"
    component={HomeScreen}
    options={{ title: 'Awesome app' }}
  />
  <Stack.Screen
    name="Profile"
    component={ProfileScreen}
    options={{ title: 'My profile' }}
  />
</Stack.Navigator>

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

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

<Stack.Screen
  name="Home"
  component={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:

<Stack.Navigator>
  <Stack.Group
    screenOptions={{ headerStyle: { backgroundColor: 'papayawhip' }}}
  >
    <Stack.Screen name="Home" component={HomeScreen} />
    <Stack.Screen name="Profile" component={ProfileScreen} />
  </Stack.Group>
  <Stack.Group screenOptions={{ presentation: 'modal' }}>
    <Stack.Screen name="Settings" component={Settings} />
    <Stack.Screen name="Share" component={Share} />
  </Stack.Group>
</Stack.Navigator>

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

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

<Stack.Navigator>
  <Stack.Screen name="Home" component={HomeScreen} />
  <Stack.Screen name="Profile" component={ProfileScreen} />
  <Stack.Group
    screenOptions={({ navigation }) => ({
      presentation: 'modal',
      headerLeft: () => <CancelButton onPress={navigation.goBack} />,
    })}
  >
    <Stack.Screen name="Settings" component={Settings} />
    <Stack.Screen name="Share" component={Share} />
  </Stack.Group>
</Stack.Navigator>

导航器上的 `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 add specify options that you want to configure for the whole navigator.

示例：

¥Example:

<Stack.Navigator
  screenOptions={{ headerStyle: { backgroundColor: 'papayawhip' }}}
>
  <Stack.Screen name="Home" component={HomeScreen} />
  <Stack.Screen name="Profile" component={ProfileScreen} />
</Stack.Navigator>

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

      return (
        <MaterialCommunityIcons
          name={icons[route.name]}
          color={color}
          size={size}
        />
      );
    },
  })}
>
  <Tab.Screen name="Home" component={HomeScreen} />
  <Tab.Screen name="Profile" component={ProfileScreen} />
</Tab.Navigator>

`navigation.setOptions` 方法

¥navigation.setOptions method

navigation 属性有一个 setOptions 方法，可让你从组件内更新屏幕的选项。更多详情请参见导航属性的文档。

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

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

Screen 上的 options 属性​

Group 上的 screenOptions 属性​

导航器上的 screenOptions 属性​

navigation.setOptions 方法​

`Screen` 上的 `options` 属性

`Group` 上的 `screenOptions` 属性

导航器上的 `screenOptions` 属性

`navigation.setOptions` 方法