跳到主要内容
版本: 7.x

术语表

注意

这是文档的新章节，缺少很多术语！请提交 pull request 或 issue，包含你认为应该在此处解释的术语。

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 应用中的 reducers）。通常你永远不需要直接与路由器交互，除非你正在编写自定义导航器。

屏幕组件​

屏幕组件是我们在路由配置中使用的组件。

const Stack = createNativeStackNavigator();

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

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

导航对象包含用于导航的方法。它包含如下方法：

  • dispatch 会将一个动作发送到路由器
  • navigate, goBack 等方法可以方便地 dispatch 动作

可以使用 useNavigation hook 访问此对象。它也作为 prop 传递给使用动态 API 定义的屏幕。

更多详情，请参阅“Navigation object 文档”。

“Route object 参考” 章节对此进行了更详细的介绍，描述了解决方法，并提供了有关 route 对象上可用的其他属性的更多信息。

路由对象​

此 prop 将传递给所有屏幕。包含有关当前路由的信息，例如 params、key 和 name。它也可以包含任意参数

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

更多详情，请参阅“Route object 参考”。

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

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

对于此导航状态，有两个路由（可能是标签页，也可能是堆栈中的卡片）。index 指示活动路由，即 “B”。

你可以在这里阅读更多关于导航状态的信息。

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