Nativescript nativescript-yogalayout

ns plugin add @triniwiz/nativescript-yogalayout

使用说明

最新稳定版本的文档

在 React NativeScript 中

首先，在您的 React NativeScript 应用渲染之前注册组件。将此代码放置在入口文件（可能是 src/app.ts 或类似）中是一个好地方，在调用 ReactNativeScript.start 函数之前。以下是安装方法

import { registerYogaLayout } from "@triniwiz/nativescript-yogalayout/react";

registerYogaLayout();

示例使用

import * as React from "react";

export function YogaLayoutExample() {
    return (
        <yoga>
            <yoga backgroundColor="aqua" margin={50} padding={30} borderRadius={10} borderWidth={5} borderColor="purple">
                <yoga backgroundColor="red" padding={2}>
                    <yoga flex={.3} backgroundColor="green">
                        <label alignSelf="center" color="black" text="First"/>
                    </yoga>
                    <yoga flex={.5} backgroundColor="white">
                        <label alignSelf="center" color="black" text="Second"/>
                    </yoga>
                    <yoga backgroundColor="pink">
                        <label alignSelf="center" color="black" text="Third"/>
                    </yoga>
                    <label alignSelf="center" color="blue" text="Something"/>
                </yoga>
                <yoga position="absolute" bottom="10" right="10" width="100" height="100" backgroundColor="yellow" padding="10">
                    <label color="black" text="Absolute"/>
                </yoga>
            </yoga>
        </yoga>
    );
}

故障排除

当您在 JSX 中例如写入 <yoga> 时，如果看到如下错误

属性 'yoga' 不存在于类型 'JSX.IntrinsicElements'。ts(2339)

请确保您已安装以下内容

1. 已安装 react-nativescript npm 模块。
2. 已安装 @types/react npm 模块，严格使用在 React NativeScript 起始模板 中提供的精确版本。
3. 运行 React NativeScript 模板附带的后置安装脚本 – npm run postinstall – 以修复 @types/react。
4. 按上述方法注册组件（即导入并运行 registerYogaLayout() 方法）。
5. 如果您使用 Visual Studio Code，则可以通过选项单击导入 @triniwiz/nativescript-yogalayout/react 来跳转到文件；打开文件将强制它加载提供的类型。

许可协议

Apache 许可协议第 2 版