10-React Native 从入门到深入：包含在MacOS与Windows系统的环境搭建与开发指南

通过此指南，Windows 开发者可快速搭建完整的 React Native 环境，并充分利用 Windows 平台特性进行跨平台应用开发。通过系统化的学习路径和深度环境配置指南，可快速跨越React Native入门门槛，为后续开发复杂应用奠定坚实基础。Metro 服务默认运行在。配置环境变量（添加到。

编程的一拳超人

791人浏览 · 2025-06-27 14:13:57

编程的一拳超人 · 2025-06-27 14:13:57 发布

📃个人主页：编程的一拳超人

⛺️ 欢迎关注：👍点赞 👂🏽留言 😍收藏 💞 💞 💞

于高山之巅，方见大河奔涌；于群峰之上，更觉长风浩荡。 ——《人民日报》

🍁🌳React Native MacOS 环境搭建与开发指南

一、React Native 核心认知

跨平台本质：
- 使用 JavaScript 编写，渲染为原生组件（非 WebView）
- 通过 Bridge 实现 JS 与原生平台通信
- 支持 90% 代码复用率（iOS/Android）
技术栈关系：

二、环境搭建全流程（macOS）

1. 基础工具链

工具	作用	安装命令
Node.js	JavaScript 运行时	官网下载
Homebrew	包管理器	`/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"`
Watchman	文件监控	`brew install watchman`
JDK	Java 开发套件	`brew install openjdk@11`
Android Studio	Android 开发环境	官网下载

2. Android 环境配置

在 Android Studio 中安装：
- Android SDK
- Android SDK Platform
- Android Virtual Device

配置环境变量（添加到 ~/.zshrc）：

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

3. 创建项目（新方式）

# 使用 npx 避免全局安装
npx react-native init AwesomeProject

# 指定版本（推荐 0.70+）
npx react-native init MyApp --version 0.71.0

4. 项目结构解析

MyApp/
├── android/    # Android 原生代码
├── ios/        # iOS 原生代码
├── node_modules/
├── App.js      # 主入口文件
├── index.js    # 注册入口
└── package.json

三、运行与调试实战

1. 启动应用

# iOS 模拟器（需 macOS）
npx react-native run-ios

# Android 模拟器
npx react-native run-android

# 指定设备
npx react-native run-android --deviceId=设备ID

2. 调试技巧

快捷键	功能	平台
Cmd + R	重新加载	iOS
Cmd + D	开发者菜单	iOS
Cmd + Ctrl + Z	摇动菜单	Android 模拟器
F2/Cmd + M	开发者菜单	Android

3. 进阶调试方法

Chrome 调试：
- 在开发者菜单中选择 “Debug”
- 访问 chrome://inspect
- 支持断点调试、网络监控

React DevTools：

npm install -g react-devtools
react-devtools

性能分析：

import { Performance } from 'react-native';

// 标记性能点
Performance.mark('my_marker');

四、常见问题解决方案

1. Android 构建失败

# 清理缓存
cd android && ./gradlew clean
cd .. && npm start -- --reset-cache

2. iOS 依赖问题

cd ios && pod install --repo-update

3. 端口占用（8081）

# 查找占用进程
lsof -i :8081

# 结束进程
kill -9 <PID>

五、学习路径规划

第1周：基础组件
- 掌握 <View>, <Text>, <Image> 等核心组件
- 学习 Flexbox 布局
- 实现简单登录界面
第2周：导航与状态
- 使用 React Navigation
- 掌握 useState/useEffect
- 实现多页面跳转
第3周：数据交互
- 集成 Axios/Fetch
- 处理 API 请求
- 本地数据存储（AsyncStorage）
第4周：原生交互
- 编写原生模块
- 集成第三方 SDK
- 性能优化实践

六、推荐学习资源

官方文档：
- React Native 中文网
- 新架构文档
实践项目：
- 天气应用（API 集成）
- TodoList（状态管理）
- 电商首页（复杂布局）
工具生态：

环境配置验证脚本：
创建 env-check.js 文件：

const { execSync } = require('child_process');

console.log('Checking environment:');

// 检查Node版本
const nodeVersion = execSync('node -v').toString().trim();
console.log(`✓ Node.js ${nodeVersion}`);

// 检查JDK
try {
  const javaVersion = execSync('javac -version 2>&1').toString().trim();
  console.log(`✓ JDK ${javaVersion}`);
} catch {
  console.log('✗ JDK not found');
}

// 检查Android环境
try {
  const adbVersion = execSync('adb version').toString().split('\n')[0];
  console.log(`✓ ${adbVersion}`);
} catch {
  console.log('✗ ADB not found');
}

通过系统化的学习路径和深度环境配置指南，可快速跨越React Native入门门槛，为后续开发复杂应用奠定坚实基础。

🍁🌳React Native Windows 环境搭建与开发指南

一、Windows 环境搭建全流程

1. 核心工具安装清单

工具	作用	安装方式
Node.js (16+)	JavaScript 运行时	官网下载
Python 3	构建工具依赖	勾选 “Add to PATH”
Java JDK 11	Android 编译环境	Adoptium JDK
Android Studio	Android 开发套件	官网下载
Yarn	包管理器	`npm install -g yarn`

2. Android 环境配置

在 Android Studio 中安装：
- SDK Manager > SDK Platforms：
  - Android 13.0 (Tiramisu) API Level 33
- SDK Tools：
  - Android SDK Build-Tools 33
  - Android Emulator
  - Android SDK Platform-Tools
  - Intel x86 Emulator Accelerator (HAXM)

配置环境变量（系统属性 > 环境变量）：

ANDROID_HOME = C:\Users\<用户名>\AppData\Local\Android\Sdk
Path 添加：
  %ANDROID_HOME%\platform-tools
  %ANDROID_HOME%\emulator
  %ANDROID_HOME%\tools
  %ANDROID_HOME%\tools\bin
JAVA_HOME = C:\Program Files\Eclipse Adoptium\jdk-11.0.15.10-hotspot

3. 创建 React Native 项目

# 使用 npx 创建项目（避免全局安装）
npx react-native init AwesomeProject

# 进入项目目录
cd AwesomeProject

二、项目运行与调试

1. 启动 Metro 打包工具

# 新开 PowerShell 窗口
yarn start

Metro 服务默认运行在 http://localhost:8081

2. 运行 Android 应用

# 方式1：自动启动模拟器
yarn android

# 方式2：连接真机
adb devices
yarn android --deviceId <设备ID>

3. Windows 特有调试技巧

操作	方法
重新加载应用	双击 R 键
开发者菜单	Ctrl + M (模拟器) / 摇动设备(真机)
热重载	开发者菜单 > Enable Hot Reloading
远程调试	开发者菜单 > Debug > 打开 `chrome://inspect`

三、常见问题解决方案

1. 端口冲突处理

# 查找占用 8081 端口的进程
netstat -ano | findstr :8081

# 结束进程
taskkill /PID <进程ID> /F

2. 构建失败处理

# 清理 Android 构建缓存
cd android
gradlew clean
cd ..

# 重置 Metro 缓存
yarn start --reset-cache

3. 模拟器无法启动

确保 BIOS 开启虚拟化：
- Intel VT-x 或 AMD-V

安装 HAXM：

# 在 Android SDK 目录下
cd $env:ANDROID_HOME\extras\intel\Hardware_Accelerated_Execution_Manager
.\intelhaxm-android.exe

四、Windows 开发优化配置

1. 推荐 VS Code 插件

- React Native Tools (Microsoft)
- ES7+ React/Redux Snippets
- Prettier - Code formatter
- React Native Styled Components
- Android Emulator Launcher

2. 配置高效终端

# 安装 Windows Terminal
winget install Microsoft.WindowsTerminal

# 配置 PowerShell 环境
Install-Module posh-git -Scope CurrentUser
Install-Module oh-my-posh -Scope CurrentUser

3. 性能优化设置

# 开启 Hermes 引擎 (Android)
# android/app/build.gradle
project.ext.react = [
  enableHermes: true  // 改为 true
]

# 开启 RAM 模式
yarn add react-native-ram-bundle
react-native bundle --platform android --dev false --reset-cache --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res --config metro.config.js

五、Windows 特有功能开发

1. 调用 Windows API

// 使用 react-native-windows 扩展
import { Linking } from 'react-native';

// 打开系统设置
const openWifiSettings = () => {
  Linking.openURL('ms-settings:network-wifi');
};

// 调用 Windows 通知
import Toast from 'react-native-toast-message';

Toast.show({
  type: 'success',
  text1: 'Windows 通知',
  text2: '来自 React Native 的消息'
});

2. 文件系统操作

import RNFS from 'react-native-fs';

// 读取文档目录
const readDocuments = async () => {
  const path = RNFS.DocumentDirectoryPath;
  return RNFS.readDir(path);
};

// 写入文件
const writeFile = async (content) => {
  const filePath = `${RNFS.DocumentDirectoryPath}/test.txt`;
  await RNFS.writeFile(filePath, content);
};

六、学习资源推荐

1. Windows 专属资源

2. 社区支持

Discord: Reactiflux 频道
Stack Overflow: 使用 react-native-windows 标签
GitHub 讨论区: microsoft/react-native-windows

七、项目实战建议

1. 第一阶段：基础组件练习

1. 实现登录界面 (TextInput, Button)
2. 创建图片浏览器 (Image, FlatList)
3. 设计设置页面 (Switch, Slider)

2. 第二阶段：集成 Windows 特性

1. 调用系统通知
2. 访问文件系统
3. 集成 Windows 日历
4. 使用蓝牙 API

3. 进阶项目

- 文件管理器应用
- 系统监控仪表盘
- 本地媒体播放器
- UWP 风格计算器

环境验证脚本 (保存为 check-env.ps1)

Write-Host "React Native 环境检查" -ForegroundColor Cyan

# 检查 Node 版本
$nodeVersion = node -v
Write-Host "✓ Node.js $nodeVersion" -ForegroundColor Green

# 检查 JDK
try {
  $javaVersion = & javac -version 2>&1
  Write-Host "✓ JDK $javaVersion" -ForegroundColor Green
} catch {
  Write-Host "✗ JDK not found" -ForegroundColor Red
}

# 检查 Android 环境
if (Test-Path env:ANDROID_HOME) {
  $sdkVersion = Get-Content "$env:ANDROID_HOME\platforms\android-33\source.properties" | 
                 Select-String "Pkg.Revision" | 
                 ForEach-Object { $_.Line.Split('=')[1] }
  Write-Host "✓ Android SDK $sdkVersion" -ForegroundColor Green
} else {
  Write-Host "✗ ANDROID_HOME not set" -ForegroundColor Red
}

# 检查模拟器
$emulators = & emulator -list-avds 2>$null
if ($emulators) {
  Write-Host "✓ 可用模拟器:" -ForegroundColor Green
  $emulators | ForEach-Object { Write-Host "  - $_" }
} else {
  Write-Host "✗ 未找到模拟器" -ForegroundColor Red
}

通过此指南，Windows 开发者可快速搭建完整的 React Native 环境，并充分利用 Windows 平台特性进行跨平台应用开发。

开源鸿蒙跨平台开发者社区

开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。

更多推荐

Flutter for OpenHarmony 技术博客阅读器APP

😩所以我决定用 Flutter for OpenHarmony 做一款程序员专属的技术博客阅读器，主打这些功能：✅ 聚合各大技术平台博客文章，一键下拉刷新✅ 应用内直接打开 WebView 阅读，支持 JS 交互✅ 安全加密存储你的书签和阅读进度，再也不怕丢✅ 响应式数据流，状态管理丝滑到飞起✅ 离线阅读功能，地铁上也能看技术文章这款 APP 完美适配 OpenHarmony 鸿蒙系统，利用四大

开源鸿蒙跨平台开发者社区

【maaath】Flutter for OpenHarmony 宠物社区应用实战开发

宠物社区应用是一款面向宠物爱好者的社交类应用，用户可以在平台上分享自家宠物的日常照片、参与宠物问答讨论、浏览萌宠内容等。该应用需要具备良好的用户体验，支持图片瀑布流展示、流畅的下拉刷新和上拉加载功能，以及直观的底部导航交互。1. 网络权限配置在2. 页面路由配置在"src": [3. 入口 Ability 配置在if (err!return;});