NativeScript 环境安装 #

安装概述 #

NativeScript 开发环境需要以下组件:

text
┌─────────────────────────────────────────────────────────────┐
│                    开发环境组成                              │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│   ┌─────────────────────────────────────────────────────┐  │
│   │              Node.js + npm                          │  │
│   │              运行时环境                              │  │
│   └─────────────────────────────────────────────────────┘  │
│                           │                                 │
│                           ▼                                 │
│   ┌─────────────────────────────────────────────────────┐  │
│   │           NativeScript CLI                          │  │
│   │           命令行工具                                 │  │
│   └─────────────────────────────────────────────────────┘  │
│                           │                                 │
│            ┌──────────────┴──────────────┐                 │
│            ▼                             ▼                 │
│   ┌─────────────────┐          ┌─────────────────┐        │
│   │   iOS 环境       │          │  Android 环境   │        │
│   │   Xcode         │          │  Android Studio │        │
│   │   (仅 macOS)    │          │  JDK            │        │
│   └─────────────────┘          └─────────────────┘        │
│                                                             │
└─────────────────────────────────────────────────────────────┘

系统要求 #

macOS (可开发 iOS 和 Android) #

要求 最低配置 推荐配置
操作系统 macOS 11+ macOS 13+
内存 8GB 16GB+
硬盘空间 20GB 50GB+
Xcode 13.0 15.0+
Android Studio 最新版 最新版

Windows (仅开发 Android) #

要求 最低配置 推荐配置
操作系统 Windows 10 Windows 11
内存 8GB 16GB+
硬盘空间 20GB 50GB+
Android Studio 最新版 最新版

Linux (仅开发 Android) #

要求 最低配置 推荐配置
操作系统 Ubuntu 20.04 Ubuntu 22.04
内存 8GB 16GB+
硬盘空间 20GB 50GB+

安装 Node.js #

方式一:官方安装包 #

  1. 访问 Node.js 官网
  2. 下载 LTS 版本(推荐 18.x 或 20.x)
  3. 运行安装程序

方式二:使用 nvm(推荐) #

bash
# macOS/Linux
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

# 安装 Node.js
nvm install --lts
nvm use --lts

# 验证安装
node --version
npm --version

方式三:使用 Homebrew(macOS) #

bash
# 安装 Homebrew(如未安装)
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

# 安装 Node.js
brew install node

# 验证安装
node --version
npm --version

安装 NativeScript CLI #

全局安装 #

bash
# 安装 NativeScript CLI
npm install -g nativescript

# 验证安装
ns --version

# 查看帮助
ns --help

环境检查 #

bash
# 检查环境配置
ns doctor

# 检查 Android 环境
ns doctor android

# 检查 iOS 环境(仅 macOS)
ns doctor ios

配置 Android 开发环境 #

1. 安装 JDK #

bash
# macOS (使用 Homebrew)
brew install openjdk@17

# 配置环境变量
sudo ln -sfn /opt/homebrew/opt/openjdk@17/libexec/openjdk.jdk /Library/Java/JavaVirtualMachines/openjdk-17.jdk

# Windows
# 下载并安装 JDK 17
# https://adoptium.net/

# 验证安装
java --version

2. 安装 Android Studio #

  1. 访问 Android Studio 官网
  2. 下载并安装 Android Studio
  3. 启动 Android Studio,完成初始设置

3. 配置 Android SDK #

text
┌─────────────────────────────────────────────────────────────┐
│                  Android SDK 配置                            │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  Android Studio → Settings → Appearance & Behavior          │
│              → System Settings → Android SDK                 │
│                                                             │
│  需要安装:                                                  │
│  ☑ Android SDK Platform 33 (或更高)                         │
│  ☑ Android SDK Build-Tools                                  │
│  ☑ Android SDK Platform-Tools                               │
│  ☑ Android SDK Command-line Tools                          │
│  ☑ Android Emulator                                        │
│  ☑ Android SDK Tools                                       │
│                                                             │
└─────────────────────────────────────────────────────────────┘

4. 配置环境变量 #

bash
# macOS/Linux - 编辑 ~/.zshrc 或 ~/.bashrc

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin

# 使配置生效
source ~/.zshrc

# Windows - 系统环境变量
ANDROID_HOME=C:\Users\你的用户名\AppData\Local\Android\Sdk
Path 添加:
%ANDROID_HOME%\emulator
%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\tools
%ANDROID_HOME%\tools\bin

5. 创建 Android 模拟器 #

text
┌─────────────────────────────────────────────────────────────┐
│                  创建模拟器                                  │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  1. 打开 Android Studio                                     │
│  2. 点击 More Actions → Virtual Device Manager              │
│  3. 点击 Create Device                                      │
│  4. 选择设备型号(推荐 Pixel 5)                            │
│  5. 选择系统镜像(推荐 API 33, x86_64)                     │
│  6. 完成创建                                                │
│                                                             │
│  推荐配置:                                                  │
│  - RAM: 2048 MB 或更高                                      │
│  - VM heap: 512 MB                                          │
│  - Graphics: Hardware                                       │
│                                                             │
└─────────────────────────────────────────────────────────────┘

6. 验证 Android 环境 #

bash
# 列出可用模拟器
emulator -list-avds

# 列出连接设备
adb devices

# 检查环境
ns doctor android

配置 iOS 开发环境(仅 macOS) #

1. 安装 Xcode #

  1. 打开 App Store
  2. 搜索 “Xcode”
  3. 点击安装(约 12GB,需要时间)

2. 安装 Xcode 命令行工具 #

bash
# 安装命令行工具
xcode-select --install

# 接受许可协议
sudo xcodebuild -license accept

# 设置 Xcode 路径
sudo xcode-select -s /Applications/Xcode.app/Contents/Developer

3. 配置 CocoaPods #

bash
# 安装 CocoaPods
sudo gem install cocoapods

# 或者使用 Homebrew
brew install cocoapods

# 验证安装
pod --version

4. 创建 iOS 模拟器 #

text
┌─────────────────────────────────────────────────────────────┐
│                  创建模拟器                                  │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  1. 打开 Xcode                                              │
│  2. Window → Devices and Simulators                        │
│  3. 选择 Simulators 标签                                    │
│  4. 点击 + 创建新模拟器                                     │
│  5. 选择设备型号和系统版本                                   │
│                                                             │
│  推荐配置:                                                  │
│  - 设备: iPhone 14 Pro                                      │
│  - 系统: iOS 16.0 或更高                                    │
│                                                             │
└─────────────────────────────────────────────────────────────┘

5. 验证 iOS 环境 #

bash
# 列出可用模拟器
xcrun simctl list devices

# 检查环境
ns doctor ios

安装 VS Code 扩展 #

推荐扩展 #

text
┌─────────────────────────────────────────────────────────────┐
│                  VS Code 扩展                                │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  必装扩展:                                                  │
│  ☑ NativeScript - NativeScript 官方扩展                    │
│  ☑ NativeScript + Angular - Angular 支持                   │
│  ☑ NativeScript + Vue - Vue 支持                           │
│                                                             │
│  推荐扩展:                                                  │
│  ☑ TypeScript - TypeScript 支持                            │
│  ☑ ESLint - 代码检查                                       │
│  ☑ Prettier - 代码格式化                                   │
│  ☑ XML Tools - XML 格式化                                  │
│                                                             │
└─────────────────────────────────────────────────────────────┘

安装方式 #

bash
# 命令行安装
code --install-extension NativeScript.nativescript

# 或在 VS Code 中
# Ctrl+Shift+X → 搜索 "NativeScript" → 安装

环境验证 #

完整检查 #

bash
# 运行完整环境检查
ns doctor

# 预期输出示例:
# ✓ Node.js version: 18.17.0
# ✓ NativeScript CLI version: 8.6.0
# ✓ Android Studio installed
# ✓ Android SDK installed
# ✓ Xcode installed (macOS only)
# ✓ CocoaPods installed (macOS only)

解决常见问题 #

text
┌─────────────────────────────────────────────────────────────┐
│                  常见问题解决                                │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  问题 1: ANDROID_HOME 未设置                                │
│  解决: 配置环境变量                                         │
│                                                             │
│  问题 2: Java 版本不正确                                    │
│  解决: 安装 JDK 17,配置 JAVA_HOME                          │
│                                                             │
│  问题 3: CocoaPods 安装失败                                 │
│  解决: sudo gem install cocoapods                           │
│         或 brew install cocoapods                           │
│                                                             │
│  问题 4: Xcode 许可未接受                                   │
│  解决: sudo xcodebuild -license accept                      │
│                                                             │
│  问题 5: 模拟器无法启动                                     │
│  解决: 检查虚拟化设置,确保 HAXM 安装                       │
│                                                             │
└─────────────────────────────────────────────────────────────┘

快速测试 #

创建测试项目 #

bash
# 创建新项目
ns create test-app --ng

# 进入项目目录
cd test-app

# 运行 Android
ns run android

# 运行 iOS(仅 macOS)
ns run ios

预期结果 #

text
┌─────────────────────────────────────────────────────────────┐
│                  成功标志                                    │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  ✓ 项目创建成功                                             │
│  ✓ 依赖安装完成                                             │
│  ✓ 应用编译成功                                             │
│  ✓ 模拟器/设备上运行                                        │
│  ✓ 显示默认界面                                             │
│                                                             │
└─────────────────────────────────────────────────────────────┘

开发工具推荐 #

必备工具 #

工具 用途 下载地址
VS Code 代码编辑器 code.visualstudio.com
Chrome 调试浏览器 google.com/chrome
Git 版本控制 git-scm.com

辅助工具 #

工具 用途
React Native Debugger 调试工具
Flipper 移动端调试
Charles 网络抓包
Postman API 测试

下一步 #

环境配置完成后,接下来学习 第一个应用,创建你的第一个 NativeScript 应用!

最后更新:2026-03-29