react-native环境配置
一、Node环境安装
下载地址：http://nodejs.cn/download/
如果用不到最新特性的话，一般选择稳定版本
但是注意，react-native要求：Node 的版本必须大于等于 10
我们点击 Windows安装包，下载完成后双击打开，一路next，最后install就好
这里推荐将安装路径放在C盘根目录，方便查看内容，当然，个人喜好，也可以默认
到此为止，node环境就搭建完成了，我们验证一下
win + R 打开运行，输入 cmd ，打开命令行，输入
node -v
一般来说，会打印出node的版本号，如果没有，请重复上面的步骤重新进行安装
这是因为刚刚安装node的时候，已经默认为我们配置了环境变量
我们打开刚刚的nodejs文件夹，会发现里面默认有两个文件
再看看node_modules这个文件夹里
有一个npm文件夹，这是nodejs的默认包管理工具
我们在控制台里再验证一下，输入
npm -v
如果这一步也成功打印出了npm版本号，那么，恭喜你，node环境已经安装成功了！
二、设置npm镜像
npm服务器架设在国外，使用的时候难免遇到网速问题，而且大部分都是网速问题，导致各种bug
那我们一般的做法就是：设置 npm 镜像。在控制台输入：
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
这样就完成了！
三、安装react-native命令行工具
在控制台输入
npm install -g react-native-cli
等待安装完成，ok
四、安装Android Studio
安装地址：https://developer.android.google.cn/studio
官方推荐的是要科学上网，但是这个网站的服务器好像是谷歌架设在国内的，轻松下载
一路next，安装完成
tips: 官方要求保证以下几项要选中，我下载的版本没有让我选，如果同学们的版本有，请保证勾选
图片来自react-native官网
五、安装安卓SDK
安装完成后我们来到欢迎页面，在点击底部"Configure"，然后就能看到"SDK Manager"
图片来自react-native官网
如果同学们已经迫不及待的打开了一个react-native项目，回不到这个欢迎页了，也别慌
在顶部 tools 里也可以找到"SDK Manager"，选择"SDK Platforms"选项卡
勾选右下角的“Show Package Details”，我们可以看到各个Android版本的详细信息
确保勾选了如图所示的编译 React Native 应用需要的是Android 9 (Pie)版本的 SDK
当然，现在有更新的Android 9.+(Q)了，我是按照官网安装的，同学们也可以选择自己喜欢的版本
但是 RN 目前支持 android4.1 以上设备
点击"SDK Tools"选项卡，同样勾中右下角的"Show Package Details"，展开"Android SDK Build-Tools"选项，确保选中了 React Native 所必须的 28.0.3 版本
到目前为止，最新的 Android SDK Build-Tools 版本是 29.0.1
我是Android Studio 默认安装的版本，准备更新一下试试
react-native官方还推荐安装 HAXM（Intel 虚拟硬件加速驱动），我看工具里已经默认安装了，这里不管
最后，点击右下角的 Apply 下载安装
六、配置 ANDROID_HOME 环境变量
打开 控制面板 - 系统和安全 - 系统
这一步也可以通过 右击 计算机 - 属性 来完成
再依次点击 高级系统设置 - 高级 - 环境变量 - 新建
图片来自react-native官网
ANDROID_HOME
c:\Users\你的用户名\AppData\Local\Android\Sdk
上面是变量名，下面是变量值，如图是 Android Studio 默认的Sdk安装目录
同学们也可能不一样，具体请参照
“SDK Manager” 里的 “Android SDK Location”
如果同学们对 SDK 的安装路径进行过修改，那么在这一步也需要进行同样的修改
接下来，把新建的环境变量放到path里面去
%ANDROID_HOME%\platform-tools;
注意，这一步一定要万分小心谨慎，不小心删除了path里的其他内容可能导致其他应用软件失效甚至是系统崩溃，并且是很难排查的，最好添加的时候先复制一份到记事本里
最后重启控制台，因为之前的控制台里，环境变量不会生效
七、创建项目
在我们的工作台（workspace）按住 shift 右击，选择打开控制台
注意：不要再某些敏感目录（例如 System32）下执行init命令，会因为各种权限问题，导致初始化失败
在控制台输入：
react-native init 项目名称
tips：这里的项目名称需要是驼峰式写法，否则会报错
等待项目初始化完成
八、准备android模拟器
我们先使用Android Studio提供的官方模拟器，但是感觉官方模拟器low low的，功能也不完善，后面会再出一篇讲怎么样使用第三方模拟器
在 Android Studio 顶部 tools 里找到"AVD Manager"
点击“Create Virtural Devide”按钮创建一个新的AVD（Android Virtual Device，安卓虚拟设备）
不知道选哪个，算咯，就照她推荐的，用这个Pixel2吧
TIPS：同学们先别急选，有坑！！！推荐选择 Nexus S，原因请看后面！
点击“Next”，然后点击 “Pie” 后面的 “Download”，等待图片下载完成
最后点击“finish”完成虚拟机创建，在我们的设备列表里就会多出一个新的AVD
点击 “Actions” 里面的 绿色小三角按钮，运行我们的 AVD
九、编译并运行 RN 应用
有两种方法可以做到：
1、通过命令行（推荐）
在项目目录里打开命令行，输入
react-native run-android
tips:这一步之前请确保已经有一个正在运行的模拟器，否则会报错
等待项目编译，第一次时间会长，主要还是取决于网速
这里会打开一个新的命令行窗口
同学们不要关闭它
看看我们的AVD，项目已经成功编译了！
2、通过 Android Studio
点击 File - Open，选择项目目录里的 android 文件夹，点击 OK
等待 Android Studio 为我们编译，这个时间也比较长，大家别慌
编译完成之后就可以点击 工具栏里的绿色小箭头 运行
选择AVD
点击OK，等待打包
好了，打包好了，然后，然后就没有然后了，啊啊啊啊啊。报错了
报错信息告诉我们需要运行一个 Mrtro server，叫我们运行 react-native start 命令，再想想我们第一种方式新弹出的那个控制台窗口，好的，懂了吧！我们在项目目录下打开控制台，输入：
react-native start
果然出现了和第一种方式一样的控制台信息
在AVD里连按两下R（表示RELOAD），不报错了，白屏
好吧，在Android Studio里重新运行一下项目，好了，完美启动！
十、调试
看看我们AVD里的内容：
需要“点击菜单按钮”或者是“摇晃手机”来打开控制台
tips:这就是为什么AVD要选择Nexus S的原因，因为Android Studio的模拟器大都取消了摇晃按钮和菜单按钮！
还好 Nexus S 版本有菜单键，我们点击菜单键
大家看到这里有很多功能，例如可以 点击Debug JS Remotely 来打开控制台
由于篇幅限制，这里不再详解react-native调试，以后可能会单写一篇，什么，你问啥时候？这不是看心情么~~~
十一、结语
天哪，这一篇好长啊！！自己搞的时候也确实花了很多功夫，但是还好没什么太多坑，官方文档真的很详细，点赞！！！
附上链接：https://reactnative.cn/docs/getting-started/
但是看着这个AVD，真的是，有够low，老年机既视感。。
研究研究看怎么弄第三方模拟器调试，比如夜神、逍遥之类的，明后天吧，会出个单章，敬请期待！
希望这篇文章能够帮助同学们成功爬坑，如果对您有所帮助，请关注、点赞并收藏，有其他问题也可以留言或私信，欢迎讨论！
作者：闲汪
链接：https://www.jianshu.com/p/be001734b7fd
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
以上是 react-native环境配置 的全部内容， 来源链接： utcz.com/z/382020.html
