Skip to main content

RootTag

RootTag 是分配给 React Native 表面的原生根视图的不透明标识符 - 即分别适用于 Android 或 iOS 的 ReactRootView 或 RCTRootView 实例。简而言之，它是一个表面标识符。

¥RootTag is an opaque identifier assigned to the native root view of your React Native surface — i.e. the ReactRootView or RCTRootView instance for Android or iOS respectively. In short, it is a surface identifier.

何时使用 RootTag？​

¥When to use a RootTag?

对于大多数 React Native 开发者来说，你可能不需要处理 RootTag。

¥For most React Native developers, you likely won’t need to deal with RootTags.

当应用渲染多个 React Native 根视图并且你需要根据表面以不同方式处理原生 API 调用时，RootTag 非常有用。一个例子是当应用使用原生导航并且每个屏幕都是单独的 React Native 根视图时。

¥RootTags are useful for when an app renders multiple React Native root views and you need to handle native API calls differently depending on the surface. An example of this is when an app is using native navigation and each screen is a separate React Native root view.

在原生导航中，每个 React Native 根视图都在平台的导航视图中渲染（例如，Android 的 Activity，iOS 的 UINavigationViewController）。通过这种方式，你可以利用平台的导航范例，例如原生外观和导航转换。与原生导航 API 交互的功能可以通过 原生模块 暴露给 React Native。

¥In native navigation, every React Native root view is rendered in a platform’s navigation view (e.g., Activity for Android, UINavigationViewController for iOS). By this, you are able to leverage the navigation paradigms of the platform such as native look and feel and navigation transitions. The functionality to interact with the native navigation APIs can be exposed to React Native via a native module.

例如，要更新屏幕的标题栏，你可以调用导航模块的 API setTitle("Updated Title")，但它需要知道要更新堆栈中的哪个屏幕。此处需要 RootTag 来标识根视图及其托管容器。

¥For example, to update the title bar of a screen, you would call the navigation module’s API setTitle("Updated Title"), but it would need to know which screen in the stack to update. A RootTag is necessary here to identify the root view and its hosting container.

RootTag 的另一个用例是当你的应用需要根据其原始根视图将某个 JavaScript 调用归因于原生时。需要 RootTag 来区分来自不同表面的调用源。

¥Another use case for RootTag is when your app needs to attribute a certain JavaScript call to native based on its originating root view. A RootTag is necessary to differentiate the source of the call from different surfaces.

如何访问 RootTag...如果你需要的话​

¥How to access the RootTag... if you need it

在 0.65 及以下版本中，RootTag 通过 旧版上下文 访问。为了让 React Native 为 React 18 及更高版本中的并发功能做好准备，我们将在 0.66 中通过 RootTagContext 迁移到最新的 上下文 API。版本 0.65 支持旧版上下文和推荐的 RootTagContext，以便开发者有时间迁移其调用站点。请参阅重大变更摘要。

¥In versions 0.65 and below, RootTag is accessed via a legacy context. To prepare React Native for Concurrent features coming in React 18 and beyond, we are migrating to the latest Context API via RootTagContext in 0.66. Version 0.65 supports both the legacy context and the recommended RootTagContext to allow developers time to migrate their call-sites. See the breaking changes summary.

如何通过 RootTagContext 访问 RootTag。

¥How to access RootTag via the RootTagContext.

import {RootTagContext} from 'react-native';
import NativeAnalytics from 'native-analytics';
import NativeNavigation from 'native-navigation';

function ScreenA() {
  const rootTag = useContext(RootTagContext);

  const updateTitle = title => {
    NativeNavigation.setTitle(rootTag, title);
  };

  const handleOneEvent = () => {
    NativeAnalytics.logEvent(rootTag, 'one_event');
  };

  // ...
}

class ScreenB extends React.Component {
  static contextType: typeof RootTagContext = RootTagContext;

  updateTitle(title) {
    NativeNavigation.setTitle(this.context, title);
  }

  handleOneEvent() {
    NativeAnalytics.logEvent(this.context, 'one_event');
  }

  // ...
}

从 React 文档中了解有关 classes 和 hooks 的 Context API 的更多信息。

¥Learn more about the Context API for classes and hooks from the React docs.

0.65 的重大变化​

¥Breaking Change in 0.65

RootTagContext 原名为 unstable_RootTagContext，在 0.65 中改为 RootTagContext。请更新你的代码库中 unstable_RootTagContext 的所有用法。

¥RootTagContext was formerly named unstable_RootTagContext and changed to RootTagContext in 0.65. Please update any usages of unstable_RootTagContext in your codebase.

0.66 中的重大变化​

¥Breaking Change in 0.66

对 RootTag 的旧上下文访问将被删除并由 RootTagContext 取代。从 0.65 开始，我们鼓励开发者主动将 RootTag 访问迁移到 RootTagContext。

¥The legacy context access to RootTag will be removed and replaced by RootTagContext. Beginning in 0.65, we encourage developers to proactively migrate RootTag accesses to RootTagContext.

未来的计划​

¥Future Plans

随着新的 React Native 架构的进展，未来将会对 RootTag 进行迭代，目的是保持 RootTag 类型不透明并防止 React Native 代码库中出现问题。请不要依赖 RootTag 当前别名为数字的事实！如果你的应用依赖于 RootTags，请密切关注我们的版本更改日志，你可以在其中找到 此处。

¥With the new React Native architecture progressing, there will be future iterations to RootTag, with the intention to keep the RootTag type opaque and prevent thrash in React Native codebases. Please do not rely on the fact that RootTag currently aliases to a number! If your app relies on RootTags, keep an eye on our version change logs, which you can find here.