RootTag
RootTag
是分配给 React Native 表面的原生根视图(即 Android 或 iOS 的 ReactRootView
或 RCTRootView
实例)的不透明标识符。简而言之,它是一个表面标识符。
何时使用 RootTag?
对于大多数 React Native 开发者来说,您可能不需要处理 RootTag
。
当应用渲染多个 React Native 根视图,并且您需要根据表面以不同方式处理原生 API 调用时,RootTag
非常有用。一个例子是当应用使用原生导航,并且每个屏幕都是一个单独的 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
。
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 文档中了解有关 类 和 Hook 的 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 当前别名为数字这一事实!如果您的应用依赖于 RootTag,请密切关注我们的版本更改日志,您可以在此处找到。