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 #
方式一:官方安装包 #
- 访问 Node.js 官网
- 下载 LTS 版本(推荐 18.x 或 20.x)
- 运行安装程序
方式二:使用 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 #
- 访问 Android Studio 官网
- 下载并安装 Android Studio
- 启动 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 #
- 打开 App Store
- 搜索 “Xcode”
- 点击安装(约 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