分组

分组在导航器中包含多个屏幕，用于组织目的。它们也可以用于将相同的选项（例如头部样式）应用于一组屏幕，或定义一个通用布局等。

静态

可以使用导航器配置中的 groups 属性定义分组。

const MyStack = createNativeStackNavigator({
  groups: {
    App: {
      screenOptions: {
        headerStyle: {
          backgroundColor: '#FFB6C1',
        },
      },
      screens: {
        Home: HomeScreen,
        Profile: EmptyScreen,
      },
    },
    Modal: {
      screenOptions: {
        presentation: 'modal',
      },
      screens: {
        Search: EmptyScreen,
        Share: EmptyScreen,
      },
    },
  },
});

在 Snack 上尝试

`groups` 对象的键（例如 Guest、User）用作分组的 navigationKey。你可以使用任何字符串作为键。

动态

`Group` 组件是从 createXNavigator 函数返回的。创建导航器后，它可以作为 Navigator 组件的子组件使用

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

在 Snack 上尝试

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

配置

屏幕选项

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

静态

const MyStack = createNativeStackNavigator({
  groups: {
    Modal: {
      screenOptions: {
        presentation: 'modal',
      },
      screens: {
        /* screens */
      },
    },
  },
});

动态

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

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

静态

const MyStack = createNativeStackNavigator({
  groups: {
    Modal: {
      screenOptions: ({ route, navigation }) => ({
        title: route.params.title,
      }),
      screens: {
        /* screens */
      },
    },
  },
});

动态

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

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

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

屏幕布局

屏幕布局是组中每个屏幕的包装器。它使为组中的所有屏幕提供错误边界和 suspense 回退，或使用附加 UI 包装每个屏幕变得更容易。

它接受一个返回 React 元素的函数

静态

const MyStack = createNativeStackNavigator({
  groups: {
    Modal: {
      screenLayout: ({ children }) => (
        <ErrorBoundary>
          <React.Suspense
            fallback={
              <View style={styles.fallback}>
                <Text style={styles.text}>Loading…</Text>
              </View>
            }
          >
            {children}
          </React.Suspense>
        </ErrorBoundary>
      ),
      screens: {
        /* screens */
      },
    },
  },
});

动态

<Stack.Group
  screenLayout={({ children }) => (
    <ErrorBoundary>
      <React.Suspense
        fallback={
          <View style={styles.fallback}>
            <Text style={styles.text}>Loading…</Text>
          </View>
        }
      >
        {children}
      </React.Suspense>
    </ErrorBoundary>
  )}
>
  {/* screens */}
</Stack.Group>

导航键

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

静态

分组的名称用作 navigationKey

const MyStack = createNativeStackNavigator({
  groups: {
    User: {
      screens: {
        /* screens */
      },
    },
    Guest: {
      screens: {
        /* screens */
      },
    },
  },
});

这意味着如果一个屏幕在 2 个分组中定义，并且分组使用 if 属性，则当条件更改导致一个分组被删除而另一个分组被使用时，屏幕将重新挂载。

动态

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

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