引导 React 渲染器：如何在应用启动时获取对根视图的引用？

Posted 2023-04-14

【中文标题】引导 React 渲染器：如何在应用启动时获取对根视图的引用？

【英文标题】：Bootstrapping a React renderer: how do I get a reference to the root view at app startup?

【发布时间】：2019-08-15 20:55:18

【问题描述】：

我正在创建一个React renderer for NativeScript（即允许您使用 React 作为 NativeScript 的 UI 框架）。

ReactNativeScript.render()（相当于更知名的ReactDOM.render()）需要一个根节点（A.K.A. 容器）来渲染。因此，我需要在启动时获取对应用程序根视图的引用（我将使用它作为 React 根）。但是，我遇到了困难：

/* app.ts */
import  on, run, launchEvent, getRootView  from "tns-core-modules/application";

console.log(getRootView());
// application root view is undefined

on(launchEvent, (data) => 
    console.log(data.root);
    // application launch event's data.root is undefined
);
run();

显然我在这里误解了应用程序生命周期。如何在启动时获取对应用程序根视图（框架）的引用？

相关的引导过程：

Nativescript Vueruntime/index.js NativeScript Angularplatform-common.ts

【参考方案1】：

你应该自己创建根视图https://github.com/nativescript-vue/nativescript-vue/blob/master/platform/nativescript/runtime/index.js#L73

首先创建根视图，然后将其设置为data.root。比如：

on(launchEvent, (data) => 
    const myComponent = new ReactComponent();
    data.root = myComponent.native;
);

【讨论】：

成功了！你是否知道我是否也应该更新data._window 或data.ios？我不确定它们到底是用来做什么的。

我认为你不需要。 Vue 和 Angular 似乎没有这样做。通常这仅在组件级别需要，它是对本机 iOS/android 对象的引用（在 Button 上，它是对 Android 上的 android.widgets.Button 和 iOS 上的 UIButton 的引用）