# 术语表

这是文档的一个新部分,它缺少很多术语!请提交一个拉请求或一个问题与一个术语,你认为应该在这里解释 (opens new window)

Navigator 是一个 React 组件,它决定如何呈现你所定义的屏幕。它包含 Screen 元素作为它的子元素来定义屏幕的配置。

NavigationContainer 是一个组件,它管理我们的导航树并包含导航状态。该组件必须封装所有导航器结构。通常,我们会在 app 的根目录下渲染这个组件,它通常是从 App.js 导出的组件。

# Router

Router 是决定导航器(类似于 Redux 应用中的 reducers)中如何处理动作和状态变化的函数集合。通常情况下,您永远不需要直接与路由器交互,除非您正在编写自定义导航器 (opens new window)

# Screen component

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

const Stack = createStackNavigator();

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

组件名称中的后缀 Screen 完全是可选的,但这是一种常用的约定;我们可以叫它迈克尔,这也一样管用。

我们在前面看到,我们的屏幕组件提供了 navigation 属性。需要注意的是,这只会发生在屏幕被 React Navigation 渲染为路由的情况下(例如,响应 navigation.navigate)。例如,如果我们将 DetailsScreen 渲染为 HomeScreen 的子元素,那么 DetailsScreen 将不会提供navigation 属性,当你按下“Go to Details…”再次”按钮在主屏幕,应用程序将抛出一个典型的 JavaScript 异常“未定义不是一个对象”。

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

“导航道具参考” (opens new window)一节对此进行了更详细的介绍,描述了解决方案,并提供了关于 navigation 属性上可用的其他属性的更多信息。

这个prop将被传递到所有屏幕,它可以用于以下用途:

  • dispatch 将向路由器发送一个操作
  • navigation, goBack 等可以方便地分派动作 导航器也可以接受一个navigation prop,如果有的话,它们应该从父导航器那里获得。

更多详细信息,请参见“导航道具文档 (opens new window)”。

路由道具参考 (opens new window)”一节对此进行了更详细的描述,描述了解决方案,并提供了关于route prop上可用的其他属性的更多信息。

# Route Prop

这个 prop 将被传送到所有屏幕。包含有关当前路由的信息,如paramskeyname

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

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

对于这个导航状态,有两个路由(可能是标签或堆栈中的卡片)。该索引表示激活路由,为“B”。

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

# Route

每个路由都是一个对象,它包含一个用来标识它的键和一个用来指定路由类型的“名称”。它也可以包含任意参数:

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

也被称为导航标题,导航栏,应用程序栏,可能还有很多其他东西。这是屏幕顶部的矩形,包含后退按钮和屏幕标题。整个矩形通常被称为 React Navigation 中的头部。