Skip to main content
Version: 7.x

群组

一个组包含导航器内的多个 screens，用于组织目的。它们还可用于将相同的选项（例如标题样式）应用于一组屏幕，或定义通用布局等。

¥A group contains several screens inside a navigator for organizational purposes. They can also be used to apply the same options such as header styles to a group of screens, or to define a common layout etc.

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

¥Groups can be defined using the groups property in the navigator configuration:

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

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

¥The keys of the groups object (e.g. Guest, User) are used as the navigationKey for the group. You can use any string as the key.

配置​

¥Configuration

屏幕选项​

¥Screen options

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

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

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

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

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

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

这些选项将与各个屏幕中指定的 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.

屏幕布局​

¥Screen layout

屏幕布局是组中每个屏幕的封装器。它使为组中的所有屏幕提供诸如通用错误边界和悬念回退之类的内容变得更加容易：

¥A screen layout is a wrapper around each screen in the group. It makes it easier to provide things such as a common error boundary and suspense fallback for all screens in a group:

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 */
      },
    },
  },
});

¥Navigation key

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

¥Optional key for a group of screens. 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):

组的名称用作 navigationKey：

¥The name of the group is used as the navigationKey:

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

这意味着如果一个屏幕在 2 个组中定义，并且这些组使用 if 属性，则如果条件发生变化导致一个组被删除而另一个组被使用，则屏幕将重新安装。

¥This means if a screen is defined in 2 groups and the groups use the if property, the screen will remount if the condition changes resulting in one group being removed and the other group being used.

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

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