跳至主要内容
版本：6.x

术语表

注意

这是文档的新部分，缺少很多术语！请提交拉取请求或问题，其中包含您认为应该在此处解释的术语。

Navigator 是一个 React 组件，它决定如何渲染您定义的屏幕。它包含 Screen 元素作为其子元素，以定义屏幕的配置。

NavigationContainer 是一个管理导航树并包含 导航状态 的组件。此组件必须包含所有导航器结构。通常，我们会在应用程序的根目录渲染此组件，该组件通常是从 App.js 导出的组件。

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator> // <---- This is a Navigator
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

路由器​

路由器是一组函数，用于决定如何在导航器中处理操作和状态变化（类似于 Redux 应用程序中的 reducer）。通常情况下，您不需要直接与路由器交互，除非您正在编写自定义导航器。

屏幕组件​

屏幕组件是我们用于路由配置的组件。

const Stack = createNativeStackNavigator();

const StackNavigator = (
  <Stack.Navigator>
    <Stack.Screen
      name="Home"
      component={HomeScreen} // <----
    />
    <Stack.Screen
      name="Details"
      component={DetailsScreen} // <----
    />
  </Stack.Navigator>
);

组件名称中的后缀Screen完全是可选的，但它是一个常用的约定；我们可以将其称为Michael，效果是一样的。

我们之前看到过，我们的屏幕组件提供了navigation道具。需要注意的是，这只有在屏幕被 React Navigation 作为路由渲染时才会发生（例如，响应navigation.navigate）。例如，如果我们将DetailsScreen渲染为HomeScreen的子元素，那么DetailsScreen将不会提供navigation道具，当您在主屏幕上按下“再次转到详细信息...”按钮时，应用程序将抛出一个典型的 JavaScript 异常“undefined is not an object”。

function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
      <DetailsScreen />
    </View>
  );
}

有关此问题的更多详细信息，请参阅“导航道具参考”部分，其中描述了解决方法，并提供了有关navigation道具上其他可用属性的更多信息。

此道具将传递给所有屏幕，它可以用于以下目的

  • dispatch将向路由器发送一个操作
  • navigate、goBack等可用于以方便的方式调度操作

导航器也可以接受一个导航道具，如果存在父导航器，它们应该从父导航器获取该道具。

有关更多详细信息，请参阅“导航道具文档”。

有关此问题的更多详细信息，请参阅“路由道具参考”部分，其中描述了解决方法，并提供了有关route道具上其他可用属性的更多信息。

路由道具​

此属性将传递给所有屏幕。包含有关当前路由的信息，例如：params、key 和 name。

导航器的状态通常看起来像这样

{
  key: 'StackRouterRoot',
  index: 1,
  routes: [
    { key: 'A', name: 'Home' },
    { key: 'B', name: 'Profile' },
  ]
}

对于此导航状态，有两个路由（可能是选项卡或堆栈中的卡片）。索引指示活动路由，即“B”。

您可以了解更多关于导航状态的信息 这里.

路由​

每个路由都是一个对象，包含一个用于识别它的键，以及一个用于指定路由类型的“名称”。它还可以包含任意参数

{
  key: 'B',
  name: 'Profile',
  params: { id: '123' }
}

也称为导航标题、导航栏、应用栏，以及可能还有很多其他名称。这是您屏幕顶部的矩形，包含后退按钮和屏幕标题。整个矩形在 React Navigation 中通常被称为标题。