跳到主要内容

RootTag

RootTag 是分配给 React Native 界面的原生根视图的不透明标识符——即 Android 或 iOS 的 `ReactRootView` 或 `RCTRootView` 实例。简而言之,它是一个界面标识符。

何时使用 RootTag?

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

`RootTag` 在应用程序渲染**多个 React Native 根视图**并且您需要根据界面以不同方式处理原生 API 调用时很有用。例如,当应用程序使用原生导航并且每个屏幕都是一个单独的 React Native 根视图时。

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

例如,要更新屏幕的标题栏,您将调用导航模块的 API `setTitle("Updated Title")`,但它需要知道要更新堆栈中的哪个屏幕。这里需要 `RootTag` 来标识根视图及其宿主容器。

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

如何访问 RootTag... 如果您需要它

在 0.65 及以下版本中,RootTag 通过旧版上下文访问。为了让 React Native 准备好应对 React 18 及更高版本中即将推出的并发特性,我们正在通过 0.66 中的 `RootTagContext` 迁移到最新的Context API。0.65 版本同时支持旧版上下文和推荐的 `RootTagContext`,以便为开发者提供迁移调用站点的时间。请参阅重大更改摘要。

如何通过 `RootTagContext` 访问 `RootTag`。

js
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 文档中了解更多关于Hooks的 Context API。

0.65 中的重大变更

`RootTagContext` 曾被命名为 `unstable_RootTagContext`,并在 0.65 版本中更改为 `RootTagContext`。请更新您代码库中所有 `unstable_RootTagContext` 的用法。

0.66 中的重大变更

对 `RootTag` 的旧版上下文访问将被移除,并由 `RootTagContext` 取代。从 0.65 版本开始,我们鼓励开发者积极地将 `RootTag` 访问迁移到 `RootTagContext`。

未来计划

随着新的 React Native 架构的推进,`RootTag` 将在未来进行迭代,旨在保持 `RootTag` 类型的不透明性,并防止 React Native 代码库中的混乱。请不要依赖 RootTag 当前别名为数字的事实!如果您的应用程序依赖 RootTags,请关注我们的版本更改日志,您可以在此处找到它们。