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

Question

我正在创建一个 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 Vue runtime/index.js
NativeScript Angular platform-common.ts

Answer 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;
});

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

Bootstrapping a React renderer: how do I get a reference to the root view at app startup?

nativescript

nativescript-angular

nativescript-vue