分组

Group 组件用于将多个 屏幕 分组到导航器中，以方便组织。它们还可以用于将相同的选项（例如标题样式）应用于一组屏幕。

Group 由 createXNavigator 函数返回

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

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

<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 组件中。

属性

screenOptions

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

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

当您传递一个函数时，它将接收 route 和 navigation

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

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

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

navigationKey

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

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

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