目录
一. 前言
最近在搭建Windows 和Mac 环境下的RN 开发环境，Windwos 的比较扯蛋，Mac 下基本上按照官网文档一路操作下来没啥问题；
记录一下Windows 环境下的配置，其实也就是拿官方中文的那个简单摘录一下；
不得不说，这个官方文档和中文文档，版本更新可真的快；
我们在不同环境下的配置，不同版本参考的文档是不一样的，可以参考如下链接:
二. 说明
2.1 v0.59
必备的依赖项：
- Node(v10.16.2，要求 >10.x.x);
- React Native 命令行工具;
- Python(2.x, 不支持3.x);
- JDK(仅1.8);
- Android Studio;
注意：
Node 的版本必须大于等于 10，Python 的版本必须为 2.x（不支持 3.x），而 JDK 的版本必须是 1.8（目前不支持 1.9 及更高版本）。安装完 Node 后建议设置 npm 镜像以加速后面的过程（或使用科学上网工具）。
2.2 v0.63
必备的依赖项：
- Node(v12.18.2，要求 >12.x.x);
- Python(2.x, 不支持3.x);
- JDK(仅1.8);
- Android Studio;
注意：
Node 的版本必须大于等于 12，Python 的版本必须为 2.x（不支持 3.x），而 JDK 的版本必须是 1.8（目前不支持 1.9 及更高版本）。安装完 Node 后建议设置 npm 镜像以加速后面的过程（或使用科学上网工具）。
三. 步骤
- 建议直接使用搜索引擎搜索下载 Node 、Python2 和Java SE Development Kit (JDK);
- 设置npm镜像
// v0.59
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
// 0.63
# 使用nrm工具切换淘宝源
npx nrm use taobao
# 如果之后需要切换回官方源可使用
npx nrm use npm
3.1 v0.59
- Yarn、React Native 的命令行工具（react-native-cli）
Yarn是 Facebook 提供的替代 npm 的工具，可以加速 node 模块的下载。React Native 的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。
npm install -g yarn react-native-cli安装完 yarn 后同理也要设置镜像源：
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global安装完 yarn 之后就可以用 yarn 代替 npm 了，例如用yarn代替npm install命令，用yarn add 某第三方库名代替npm install 某第三方库名。
3.2 v0.63
- Yarn
Yarn是 Facebook 提供的替代 npm 的工具，可以加速 node 模块的下载。
npm install -g yarn安装完 yarn 之后就可以用 yarn 代替 npm 了，例如用yarn代替npm install命令，用yarn add 某第三方库名代替npm install 某第三方库名。
- Android 开发环境
首先下载和安装 Android Studio，然后安装Android SDK,配置ANDROID_HOME 环境变量
Android SDKAndroid SDK PlatformPerformance (Intel ® HAXM)(AMD 处理器看这里)Android Virtual Device
环境变量：
// Android SDK
ANDROID_HOME
%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\emulator
%ANDROID_HOME%\tools
%ANDROID_HOME%\tools\bin
四. 创建项目
4.1 v0.59
使用 React Native 命令行工具来创建一个名为"AwesomeProject"的新项目：
react-native init AwesomeProject提示：你可以使用--version参数（注意是两个杠）创建指定版本的项目。例如react-native init MyApp --version 0.44.3。注意版本号必须精确到两个小数点。
如果你是想把 React Native 集成到现有的原生项目中，则步骤完全不同，请参考集成到现有原生应用。
4.2 v0.63
如果你之前全局安装过旧的
react-native-cli命令行工具，请使用npm uninstall -g react-native-cli卸载掉它以避免一些冲突。
使用 React Native 内建的命令行工具来创建一个名为"AwesomeProject"的新项目。这个命令行工具不需要安装，可以直接用 node 自带的npx命令来使用（注意 init 命令默认会创建最新的版本）：
npx react-native init AwesomeProject提示：你可以使用
--version参数（注意是两个杠）创建指定版本的项目。例如npx react-native init MyApp --version 0.44.3。注意版本号必须精确到两个小数点。
Windows 用户请注意，请不要在某些权限敏感的目录例如 System32 目录中 init 项目！会有各种权限限制导致不能运行！
如果你是想把 React Native 集成到现有的原生项目中，则步骤完全不同，请参考集成到现有原生应用。
五. 编译并运行 React Native 应用
5.1 v0.59
确保你先运行了模拟器或者连接了真机，然后在你的项目目录中运行react-native run-android：
cd AwesomeProject
react-native run-android
5.2 v0.63
确保你先运行了模拟器或者连接了真机，然后在你的项目目录中运行yarn android或者yarn react-native run-android：
cd AwesomeProject
yarn android
# 或者
yarn react-native run-android如果配置没有问题，你应该可以看到应用自动安装到设备上并开始运行。注意第一次运行时需要下载大量编译依赖，耗时可能数十分钟。此过程严重依赖稳定的翻墙工具，否则将频繁遭遇链接超时和断开，导致无法运行。
也可以尝试阿里云提供的maven 镜像，将android/build.gradle中的jcenter()和google()分别替换为maven { url 'https://maven.aliyun.com/repository/jcenter' }和maven { url 'https://maven.aliyun.com/repository/google' }（注意有多处需要替换）。
如果你的设备的 Android 版本低于 5.0，则可能在运行时看到红屏，请阅读在设备上运行这篇文档来按照步骤解决。
yarn react-native run-android只是运行应用的方式之一。你也可以在 Android Studio 中直接运行应用。
建议在
run-android成功后再尝试使用 Android Studio 启动。请不要轻易点击 Android Studio 中可能弹出的建议更新项目中某依赖项的建议，否则可能导致无法运行。
执行过程如下:
# node version
PS C:\Users\XXX\WorkSpaces> node --version v12.18.2
# node register manager
PS C:\Users\XXX\WorkSpaces> npx nrm use taobao npx: installed 494 in 18.603s
Registry has been set to: https://registry.npm.taobao.org/
# intall global yarn
PS C:\Users\XXX\WorkSpaces> npm install -g yarn C:\Users\XXX\AppData\Roaming\npm\yarn -> C:\Users\XXX\AppData\Roaming\npm\node_modules\yarn\bin\yarn.js
C:\Users\XXX\AppData\Roaming\npm\yarnpkg -> C:\Users\XXX\AppData\Roaming\npm\node_modules\yarn\bin\yarn.js
+ yarn@1.22.4
updated 1 package in 0.704s
# uninstall rn cli
PS C:\Users\XXX\WorkSpaces> npm uninstall -g react-native-cli removed 50 packages in 0.497s
# init demo project
PS C:\Users\XXX\WorkSpaces> npx react-native init AwesomeProject
###### ######
### #### #### ###
## ### ### ##
## #### ##
## #### ##
## ## ## ##
## ### ### ##
## ######################## ##
###### ### ### ######
### ## ## ## ## ###
### ## ### #### ### ## ###
## #### ######## #### ##
## ### ########## ### ##
## #### ######## #### ##
### ## ### #### ### ## ###
### ## ## ## ## ###
###### ### ### ######
## ######################## ##
## ### ### ##
## ## ## ##
## #### ##
## #### ##
## ### ### ##
### #### #### ###
###### ######
Welcome to React Native!
Learn once, write anywhere
√ Downloading template
√ Copying template
√ Processing template
√ Installing dependencies
Run instructions for iOS:
• cd "C:\Users\XXX\WorkSpaces\AwesomeProject" && npx react-native run-ios
- or -
• Open AwesomeProject\ios\AwesomeProject.xcodeproj in Xcode or run "xed -b ios"
• Hit the Run button
Run instructions for Android:
• Have an Android emulator running (quickest way to get started), or a device connected.
• cd "C:\Users\XXX\WorkSpaces\AwesomeProject" && npx react-native run-android
Run instructions for Windows and macOS:
• See https://aka.ms/ReactNative for the latest up-to-date instructions.
5.3 手机配置
1. 手机和电脑得在同一个局域网内;
2. Android 5.0 以上版本的手机连接电脑后，输入如下命令:
# 映射
adb reverse tcp:8081 tcp:8081
# 反映射
adb reverse --remove-all
# 查找映射列表
adb reverse --list > reverse.log3.有时候在windows 系统上，杀毒软件啥的手机管理会导致端口被占用的情况，使用如下命令查找占用端口的进程ID:
netstat -ano | findstr "5037" | findstr /c:"LISTENING" /c:"ESTABLISHED" > 5037.log如果有端口被占用的情况，使用任务管理器，杀掉指定的进程ID即可；
4.配置手机电脑代理，查看电脑wlan 和IP 地址使用如下命令:
# 查看电脑IP 地址
ipconfig > ipconfig.log
# 查看手机无线网卡IP 地址
adb shell ifconfig wlan0 > wlan0.log输入如下命令，打开RN 应用开发配置菜单:
# 弹出菜单事件
adb shell input keyevent 82或node 进程弹窗中输入d 即可弹出;
此时，点击Settings -> Debugging -> Debug server host & port for device，输入电脑IP 地址，举例：10.0.0.1:8081 点击确定即可;
然后基本的配置也就这些，运行成功后，如下图所示：
六. 参考
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
