跳至主要内容
版本：6.x

屏幕选项

每个屏幕都可以通过指定某些选项来配置其在渲染它的导航器中的呈现方式，例如，堆栈导航器中的标题标题，底部标签导航器中的标签栏图标等。不同的导航器支持不同的选项集。

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

有三种方法可以为屏幕指定选项

Screen 上的 options 属性​

您可以将名为 options 的属性传递给 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 属性。如果您想在选项中执行导航，这将很有用

<Stack.Screen
  name="Home"
  component={HomeScreen}
  options={({ navigation }) => ({
    title: 'Awesome app',
    headerLeft: () => (
      <DrawerButton onPress={() => navigation.toggleDrawer()} />
    ),
  })}
/>

Group 上的 screenOptions 属性​

您可以将名为 screenOptions 的属性传递给 Group 组件以配置组内的屏幕，您可以在其中指定一个包含不同选项的对象。在 screenOptions 中指定的选项适用于组中的所有屏幕。

示例

<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 属性。如果您想根据路由在一个地方配置所有屏幕的选项，这将非常有用。

<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 的属性传递给导航器组件，在其中您可以指定一个包含不同选项的对象。在screenOptions 中指定的选项适用于导航器中的所有屏幕。因此，这是一个为整个导航器配置选项的好地方。

示例

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

类似于options，您也可以将函数传递给screenOptions。该函数将接收每个屏幕的navigation 属性和route 属性。如果您想根据路由在一个地方配置所有屏幕的选项，这将非常有用。

<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 方法，允许您从组件内部更新屏幕的选项。有关更多详细信息，请参阅导航属性的文档。

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