Skip to main content
Version: 7.x

航海家

导航器负责管理和渲染一组屏幕。它可以使用 createXNavigator 函数创建，例如 createStackNavigator、createNativeStackNavigator、createBottomTabNavigator、createMaterialTopTabNavigator、createDrawerNavigator 等：

¥A navigator is responsible for managing and rendering a set of screens. It can be created using the createXNavigator functions, e.g. createStackNavigator, createNativeStackNavigator, createBottomTabNavigator, createMaterialTopTabNavigator, createDrawerNavigator etc.:

const MyStack = createNativeStackNavigator({
  screens: {
    Home: HomeScreen,
    Profile: ProfileScreen,
  },
});

除了内置导航器之外，还可以构建自定义导航器或使用第三方导航器。详细信息请参见 自定义导航器。

¥In addition to the built-in navigators, it's also possible to build your custom navigators or use third-party navigators. See custom navigators for more details.

配置​

¥Configuration

不同的导航器接受不同的配置选项。你可以在各自的文档中找到每个导航器的选项列表。

¥Different navigators accept different configuration options. You can find the list of options for each navigator in their respective documentation.

有一组通用配置在所有导航器之间共享：

¥There is a set of common configurations that are shared across all navigators:

ID​

导航器的可选唯一 ID。这可以与 navigation.getParent 一起使用来在子导航器中引用该导航器。

¥Optional unique ID for the navigator. This can be used with navigation.getParent to refer to this navigator in a child navigator.

const MyStack = createNativeStackNavigator({
  id: 'RootStack',
  screens: {
    Home: HomeScreen,
    Profile: ProfileScreen,
  },
});

初始路由名称​

¥Initial route name

导航器首次加载时渲染的路由名称。

¥The name of the route to render on the first load of the navigator.

const MyStack = createNativeStackNavigator({
  initialRouteName: 'Home',
  screens: {
    Home: HomeScreen,
    Profile: ProfileScreen,
  },
});

布局​

¥Layout

布局是导航器的封装器。它可用于使用封装器为导航器增加额外的 UI。

¥A layout is a wrapper around the navigator. It can be useful for augmenting the navigators with additional UI with a wrapper.

与手动在导航器周围添加封装器的区别在于，布局回调中的代码可以访问导航器的状态、选项等。

¥The difference from adding a wrapper around the navigator manually is that the code in a layout callback has access to the navigator's state, options etc.

它需要一个返回 React 元素的函数：

¥It takes a function that returns a React element:

const MyStack = createNativeStackNavigator({
  layout: ({ children, state, descriptors, navigation }) => (
    <View style={styles.container}>
      <Breadcrumbs
        state={state}
        descriptors={descriptors}
        navigation={navigation}
      />
      {children}
    </View>
  ),
  screens: {
    Home: HomeScreen,
    Profile: ProfileScreen,
  },
});

屏幕选项​

¥Screen options

导航器中所有屏幕使用的默认选项。它接受一个对象或返回一个对象的函数：

¥Default options to use for all the screens in the navigator. It accepts either an object or a function returning an object:

const MyStack = createNativeStackNavigator({
  screenOptions: {
    headerShown: false,
  },
  screens: {
    Home: HomeScreen,
    Profile: ProfileScreen,
  },
});

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

¥See Options for screens for more details and examples.

屏幕监听器​

¥Screen listeners

事件监听器可用于订阅为屏幕发出的各种事件。详细信息请参见 导航器上的 screenListeners 属性。

¥Event listeners can be used to subscribe to various events emitted for the screen. See screenListeners prop on the navigator for more details.

屏幕布局​

¥Screen layout

屏幕布局是导航器中每个屏幕的封装器。它使为导航器中的所有屏幕提供诸如错误边界和悬念回退之类的功能变得更容易，或者用额外的 UI 封装每个屏幕。

¥A screen layout is a wrapper around each screen in the navigator. It makes it easier to provide things such as an error boundary and suspense fallback for all screens in the navigator, or wrap each screen with additional UI.

它需要一个返回 React 元素的函数：

¥It takes a function that returns a React element:

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