Skip to main content
Version: 6.x

专业术语

注意

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

¥This is a new section of the documentation and it's missing a lot of terms! Please submit a pull request or an issue with a term that you think should be explained here.

¥Navigator

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

¥A Navigator is React component that decides how to render the screens you have defined. It contains Screen elements as its children to define the configuration for screens.

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

¥NavigationContainer is a component which manages our navigation tree and contains the navigation state. This component must wrap all navigators structure. Usually, we'd render this component at the root of our app, which is usually the component exported from App.js.

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

路由​

¥Router

路由是决定如何处理导航器中的操作和状态更改的函数的集合（类似于 Redux 应用中的 reducer）。通常，你永远不需要直接与路由交互，除非你正在编写 自定义导航器。

¥A router is a collection of functions that decide how to handle actions and state changes in the navigator (similar to reducers in Redux apps). Normally you'd never need to interact with a router directly, unless you're writing a custom navigator.

屏幕组件​

¥Screen component

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

¥A screen component is a component that we use in our route configuration.

const Stack = createNativeStackNavigator();

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

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

¥The suffix Screen in the component name is entirely optional, but a frequently used convention; we could call it Michael and this would work just the same.

我们之前看到我们的屏幕组件是随 navigation 属性一起提供的。需要注意的是，只有当屏幕被 React Navigation 渲染为路由时才会发生这种情况（例如，响应 navigation.navigate）。例如，如果我们将 DetailsScreen 渲染为 HomeScreen 的子级，则 DetailsScreen 将不会与 navigation 属性一起提供，并且当你按“转到详细信息...同样，"主屏幕上的按钮，应用将抛出典型的 JavaScript 异常之一"undefined 不是一个对象”。

¥We saw earlier that our screen components are provided with the navigation prop. It's important to note that this only happens if the screen is rendered as a route by React Navigation (for example, in response to navigation.navigate). For example, if we render DetailsScreen as a child of HomeScreen, then DetailsScreen won't be provided with the navigation prop, and when you press the "Go to Details... again" button on the Home screen, the app will throw one of the quintessential JavaScript exceptions "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 属性上可用的其他属性的更多信息。

¥The "Navigation prop reference" section goes into more detail on this, describes workarounds, and provides more information on other properties available on navigation prop.

¥Navigation Prop

该属性将传递到所有屏幕，它可用于以下用途：

¥This prop will be passed to all screens, and it can be used for the following:

  • dispatch 将向路由发送一个操作

    ¥dispatch will send an action up to the router

  • navigate、goBack 等可以方便地调度动作

    ¥navigate, goBack, etc are available to dispatch actions in a convenient way

导航器还可以接受导航属性，他们应该从父导航器（如果有）那里获取该导航属性。

¥Navigators can also accept a navigation prop, which they should get from the parent navigator, if there is one.

欲了解更多详情，请参阅 "导航属性文档"。

¥For more details, see the "Navigation prop document".

"路由属性参考" 部分对此进行了更详细的介绍，描述了解决方法，并提供了有关 route 属性上可用的其他属性的更多信息。

¥The "Route prop reference" section goes into more detail on this, describes workarounds, and provides more information on other properties available on route prop.

路由属性​

¥Route Prop

该属性将传递到所有屏幕。包含有关当前路由的信息，即 params、key 和 name。

¥This prop will be passed to all screens. Contains information about current route i.e. params, key and name.

¥Navigation State

导航器的状态通常如下所示：

¥The state of a navigator generally looks something like this:

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

对于这种导航状态，有两条路由（可能是选项卡，也可能是堆栈中的卡片）。该索引表示活动路由，即 "B"。

¥For this navigation state, there are two routes (which may be tabs, or cards in a stack). The index indicates the active route, which is "B".

你可以阅读有关导航状态 此处 的更多信息。

¥You can read more about the navigation state here.

路由​

¥Route

每个路由都是一个对象，其中包含用于标识它的键和用于指定路由类型的 "name"。它还可以包含任意参数：

¥Each route is an object which contains a key to identify it, and a "name" to designate the type of route. It can also contain arbitrary params:

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

¥Header

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

¥Also known as navigation header, navigation bar, app bar, and probably many other things. This is the rectangle at the top of your screen that contains the back button and the title for your screen. The entire rectangle is often referred to as the header in React Navigation.