群组

Group 组件用于将导航器内的多个 screens 分组。

¥Group components are used to group several screens inside a navigator.

Group 从 createXNavigator 函数返回：

¥A Group is returned from a createXNavigator function:

const Stack = createStackNavigator(); // Stack contains Screen & Navigator properties

创建导航器后，它可以用作 Navigator 组件的子组件：

¥After creating the navigator, it can be used as children of the Navigator component:

<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="Search" component={SearchScreen} />
    <Stack.Screen name="Share" component={ShareScreen} />
  </Stack.Group>
</Stack.Navigator>

也可以将 Group 组件嵌套在其他 Group 组件内。

¥It's also possible to nest Group components inside other Group components.

属性

¥Props

screenOptions

用于配置组内屏幕如何在导航器中呈现的选项。它接受一个对象或返回一个对象的函数：

¥Options to configure how the screens inside the group get presented in the navigator. It accepts either an object or a function returning an object:

<Stack.Group
  screenOptions={{
    presentation: 'modal',
  }}
>
  {/* screens */}
</Stack.Group>

当你传递一个函数时，它将收到 route 和 navigation：

¥When you pass a function, it'll receive the route and navigation:

<Stack.Group
  screenOptions={({ route, navigation }) => ({
    title: route.params.title,
  })}
>
  {/* screens */}
</Stack.Group>

这些选项将与各个屏幕中指定的 options 合并，并且屏幕的选项将优先于组的选项。

¥These options are merged with the options specified in the individual screens, and the screen's options will take precedence over the group's options.

有关更多详细信息和示例，请参阅 屏幕选项。

¥See Options for screens for more details and examples.

navigationKey

可选键用于一组屏幕的屏幕。如果按键更改，则该组中的所有现有屏幕都将被删除（如果在堆栈导航器中使用）或重置（如果在选项卡或抽屉导航器中使用）：

¥Optional key for a group of screens screen. If the key changes, all existing screens in this group will be removed (if used in a stack navigator) or reset (if used in a tab or drawer navigator):

<Stack.Group navigationKey={isSignedIn ? 'user' : 'guest'}>
  {/* screens */}
</Stack.Group>

这与 Screen 上的 navigationKey 属性类似，但适用于一组屏幕。

¥This is similar to the navigationKey prop on Screen, but applies to a group of screens.