在 NativeScript 应用中支持 TSX

tns 应用需要在其 tsconfig.json 中设置以下标志

  "jsx": "react",
  "reactNamespace": "UIBuilder"

tsx 将启用 tsx 和 tsx 编译，reactNamespace 将输出 "UIBuilder.createElement" 而不是 "React.createElement"，仅足够使其工作，但同时也表明我们尚未支持完整的 React 体验。

还需要在 references.d.ts 中添加以下引用以获取全局对象声明

/// <reference path="./node_modules/nativescript-tsx/tsx.d.ts" /> Enable tsx typechecking.
/// <reference path="./node_modules/nativescript-tsx/core.d.ts" /> Patch core modules with properties.

您可以在页面中创建一个 UI，例如 main-page.tsx

import {View} from "ui/core/view";
import {Page} from "ui/page";
import {StackLayout} from "ui/layouts/stack-layout";
import {Label} from "ui/label";
import {Button} from "ui/button";
import {EventData} from "data/observable";

// Provide the UIBuilder used by tsx output to querry createElement calls.
import {UIBuilder} from "nativescript-tsx";

import { HelloWorldModel } from "./main-view-model";

function navigatingTo(args: EventData) {
    console.log("Get that context...");
    let page = args.object as Page;
    page.bindingContext = new HelloWorldModel();
}

export var createPage = () =>
<Page navigatingTo={navigatingTo}>
    <StackLayout orientation="vertical">
        <Label text="Tap the button" class="title" /> 
        <Button text="TAP" tap="{{ onTap }}" />
        <Label text="{{ message }}" class="message" textWrap={true} />
    </StackLayout>
</Page>;