安装

npm i @wwwalkerrun/nativescript-ngx-magic --save

用法

使用 Component 从 @wwwalkerrun/nativescript-ngx-magic 而不是 @angular/core。为什么？
为您的每个组件创建以 .tns.html 结尾的 NativeScript 视图（和/或以 .tns.css 结尾的样式）。如何？
使用 NativeScript 运行真正原生的移动应用程序！

示例

一个示例根组件，app.component.ts

import { Component } from '@wwwalkerrun/nativescript-ngx-magic';

@Component({
  selector: 'app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {}

然后为该组件创建一个 .tns.html NativeScript 视图模板，例如

app.component.tns.html:

<ActionBar title="Magic!" icon="" class="action-bar">
</ActionBar>
<StackLayout class="p-20">
    <Label text="NativeScript is Neat." class="h1 text-center"></Label>
</StackLayout>

然后如果您的组件有 styleUrls 定义，您可以创建一个 .tns.css 文件，例如

app.component.tns.css:

// any custom css you want to use with your {N} view

第一次运行！

您需要完成上述步骤 1 和 2。

使用以下命令在 iOS 模拟器中运行您的应用程序

npm run start.ios

使用以下命令在 Android 模拟器中运行您的应用程序

npm run start.android

欢迎来到神奇的 NativeScript 世界！

如何创建 NativeScript 视图

根据我们上面的示例，假设 app.component.html 看起来像这样

<main>
  <div>This is my root component</div>
</main>

然后您会在 app.component.tns.html 中创建一个新文件，如下所示

<StackLayout>
  <Label text="This is my root component"></Label>
</StackLayout>

您还可以使用平台特定的视图（如果需要），通过 platformSpecific 组件元数据

import { Component } from '@wwwalkerrun/nativescript-ngx-magic';

@Component({
  selector: 'app',
  templateUrl: './app.component.html',
  platformSpecific: true
})
export class AppComponent {}

然后您可以为 iOS 和 Android 创建单独的视图

app.component.ios.html
app.component.android.html

您可以在这里了解更多关于 NativeScript 视图选项的信息。

您还可以在此处安装有用的视图片段 VS Code 或 Atom 编辑器。

您可以在这里了解更多关于此设置如何工作以及为什么的信息。

支持的项目

为什么不同的 Component？

Component 从 nativescript-ngx-magic 与 Component 从 @angular/core 相同，但是在应用程序在 NativeScript 移动应用程序中运行时自动使用 NativeScript 视图。

该库在底层提供了一个自定义 Decorator。您可以自由地在此处查看，并且它使用了一个实用工具。

您可以通过 angular-seed-advanced 了解更多关于这种魔法的详细用例。

关于 AoT 的特殊说明

目前您不能使用自定义组件装饰器与 AoT 编译一起使用。这可能在将来发生变化，但到目前为止，您可以使用此模式在需要为网页创建 AoT 构建时使用。

import { Component } from '@angular/core';

// just comment this out and use Component from '@angular/core'
// import { Component } from '@wwwalkerrun/nativescript-ngx-magic';

@Component({
  // etc.

完成上述操作后，运行 AoT 构建将成功。 :)

来自 nativescript-ngx-magic 的组件在 {N} 应用程序中运行时自动切换 templateUrl，以使用 {N} 视图，因此当您为 Web 创建 AoT 打包时不需要它。然而请注意，当您返回运行您的 {N} 应用程序时，您应该将来自 nativescript-ngx-magic 的 Component 中的注释恢复。再次强调，这种暂时的不便可能在将来变得不再必要。

要求

安装 NativeScript

许可证

MIT