Navigator

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

静态

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

动态

const Stack = createNativeStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Profile" component={ProfileScreen} />
    </Stack.Navigator>
  );
}

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

配置

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

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

ID

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

静态

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

动态

const Stack = createNativeStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator
      id="RootStack"
    >
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Profile" component={ProfileScreen} />
    </Stack.Navigator>
  );
}

初始路由名称

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

静态

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

动态

const Stack = createNativeStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator
      initialRouteName="Home"
    >
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Profile" component={ProfileScreen} />
    </Stack.Navigator>
  );
}

布局

布局是导航器周围的包装器。它对于使用包装器增强具有附加 UI 的导航器非常有用。

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

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

静态

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

动态

const Stack = createNativeStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator
      layout={({ children, state, descriptors, navigation }) => (
        <View style={styles.container}>
          <Breadcrumbs
            state={state}
            descriptors={descriptors}
            navigation={navigation}
          />
          {children}
        </View>
      )}
    >
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Profile" component={ProfileScreen} />
    </Stack.Navigator>
  );
}

屏幕选项

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

静态

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

动态

const Stack = createNativeStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator
      screenOptions={{ headerShown: false }}
    >
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Profile" component={ProfileScreen} />
    </Stack.Navigator>
  );
}

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

屏幕监听器

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

屏幕布局

屏幕布局是导航器中每个屏幕周围的包装器。它可以更轻松地为导航器中的所有屏幕提供诸如错误边界和 Suspense 后备之类的东西，或者用附加 UI 包装每个屏幕。

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

静态

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

动态

const Stack = createNativeStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator
      screenLayout={({ children }) => (
        <ErrorBoundary>
          <React.Suspense
            fallback={
              <View style={styles.fallback}>
                <Text style={styles.text}>Loading…</Text>
              </View>
            }
          >
            {children}
          </React.Suspense>
        </ErrorBoundary>
      )}
    >
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Profile" component={ProfileScreen} />
    </Stack.Navigator>
  );
}