nativescript

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

NativeScript

NativeScript allows you to write native mobile apps using JavaScript/TypeScript, Angular, Vue, or Svelte. Unlike hybrid apps (WebView), it renders native UI components and provides direct access to all iOS and Android APIs without boilerplate wrappers.

NativeScript 允许你使用 JavaScript/TypeScript、Angular、Vue 或 Svelte 编写原生移动应用。与混合应用（WebView）不同，它渲染原生UI组件，并且无需样板包装器即可直接访问所有 iOS 和 Android API。

When to Use

适用场景

You need 100% native performance and API access but want to share logic in JS/TS.
You want to use Angular or Vue architecture for mobile.
You need to access a new native API (e.g., latest iOS SDK) immediately without waiting for a plugin wrapper.

你需要100%的原生性能和API访问权限，但希望在JS/TS中共享逻辑。
你希望为移动应用采用Angular或Vue架构。
你需要立即访问新的原生API（例如最新的iOS SDK），而无需等待插件包装器。

Quick Start

快速开始

bash

npm install -g nativescript
ns create my-app

bash

npm install -g nativescript
ns create my-app

Choose flavor: Angular, Vue, React, Svelte, or TypeScript

cd my-app ns run android


```typescript
// Accessing Native APIs directly (Android)
const time = new android.text.format.Time();
time.setToNow();
console.log(time.format("%d.%m.%Y"));

cd my-app ns run android


```typescript
// Accessing Native APIs directly (Android)
const time = new android.text.format.Time();
time.setToNow();
console.log(time.format("%d.%m.%Y"));

Core Concepts

核心概念

Runtime Marshalling

运行时封送

The V8 (Android) and JavaScriptCore (iOS) engines are modified to inject native APIs into the JS global scope.

```
new android.widget.Button(context)
```
creates a real Android Button.
```
UILabel.alloc().init()
```
creates a real iOS Label.

V8（Android）和JavaScriptCore（iOS）引擎经过修改，可将原生API注入JS全局作用域。

```
new android.widget.Button(context)
```
创建一个真实的Android按钮。
```
UILabel.alloc().init()
```
创建一个真实的iOS标签。

Layouts

布局

NativeScript uses its own layout system that maps to native structures.

```
StackLayout
```
,
```
GridLayout
```
,
```
FlexboxLayout
```
.

NativeScript 使用自己的布局系统，该系统映射到原生结构。

```
StackLayout
```
,
```
GridLayout
```
,
```
FlexboxLayout
```
.

Plugins

插件

While you can call native APIs directly, plugins are used to simplify complex tasks (Camera, Map) and provide a unified JS API.

虽然你可以直接调用原生API，但插件用于简化复杂任务（相机、地图）并提供统一的JS API。

Best Practices

最佳实践

Do:

Use TypeScript strictly. Direct native access without types is error-prone.
Offload heavy CPU tasks to Worker Threads (JS runs on the main UI thread).
Use
```
Webpack
```
optimizations provided by the CLI.

Don't:

Don't block the main thread.
Don't assume CSS works exactly like the web (it's a subset/mapping).

建议:

严格使用TypeScript。无类型的直接原生访问容易出错。
将繁重的CPU任务卸载到Worker Threads（JS运行在主UI线程）。
使用CLI提供的
```
Webpack
```
优化。

不建议:

不要阻塞主线程。
不要假设CSS的工作方式与Web完全相同（它是子集/映射）。

Troubleshooting

故障排除

Error	Cause	Solution
`Marshalling Error`	Passing wrong type to native interaction.	Check native docs and cast types if needed.
`Out of Memory`	Large images or memory leaks.	Use `image-cache-it` or proper GC disposal management.
`Build Failed`	Native dependency issues.	`ns clean` , remove `platforms/` and `node_modules/` , re-run.

错误类型	原因	解决方案
`Marshalling Error`	向原生交互传递了错误的类型。	查看原生文档，必要时转换类型。
`Out of Memory`	大图片或内存泄漏。	使用 `image-cache-it` 或正确的垃圾回收处理管理。
`Build Failed`	原生依赖问题。	执行 `ns clean` ，删除 `platforms/` 和 `node_modules/` ，重新运行。

nativescript

Original

Translation

NativeScript

NativeScript

When to Use

适用场景

Quick Start

快速开始

Choose flavor: Angular, Vue, React, Svelte, or TypeScript

Choose flavor: Angular, Vue, React, Svelte, or TypeScript

Core Concepts

核心概念

Runtime Marshalling

运行时封送

Layouts

布局

Plugins

插件

Best Practices

最佳实践

Troubleshooting

故障排除

References

参考资料