React Native环境配置搭建（史上最详细教程）

Posted 2023-04-05 浮木盲龟

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了React Native环境配置搭建（史上最详细教程）相关的知识，希望对你有一定的参考价值。

安装RN环境卡了我好久，在网上搜了很多都不全遇到很多坎儿，时至今日我终于装好了，打算写一个详细过程造福大众，也算是对自己总结更深层的记忆。

1.首先看官网 React

注意要点：必须要有node，javaJDK和androidStudio。

再分别看这三者的条件：（1）node必须在14以上，可以去 node官网下载，我这里用的是NVM。NVM教程

搞好之后检查：cmd执行命令：

node -v
复制代码

无误之后，这一步完成。

（2）JavaJDK必须在11版本， Temurin 或者Oracle JDK

下载完成之后，安装一路回车就可以。同样搞好之后检查:cmd命令行执行：

javac -version

无误之后，这一步完成。

（3）安装 Android Studio ，将近1G的安装包，这一步某些地方会出错需要注意。

下载之后安装，C盘小的朋友主要换位置，后面还要装JDK（这玩意也很大）。

2.配置环境。

（1）首先是AndroidStudio里面的配置，很容易恼火，我就是，所以看图。

在这里打开它：可能会有点慢，因为他太大了。

点击：配置JDK。全是英文我也是碰的头破血流搞出来的很烦人。

点击：选择储存位置。（这个路径选好之后要复制一下，一会要用）

再次进来就是这样了：接下来就是安装JDK： 看关键字。

看图：

这些勾选之后点击勾选OK就开始下载了，看图：

这些搞好之后就可以关了这玩意了，烦人。

（2）环境变量配置。控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建，创建一个名为ANDROID_HOME的环境变量（系统或用户变量均可），指向你的 Android SDK 所在的目录。

看图：

两个是一样的，在哪配都行，只不过系统权限大一点。

新建：

ANDROID_HOME

E:\\AndroidSDKComponentsSetup //这个路径按自己的

记得点击确定。

然后点击：path

新建四个，一次填写。

%ANDROID_SDK_ROOT%\\platform-tools
%ANDROID_SDK_ROOT%\\emulator
%ANDROID_SDK_ROOT%\\tools
%ANDROID_SDK_ROOT%\\tools\\bin

一路点击确定就完成了。

同样搞好之后检查，cmd命令：两个都可以

set path
set ANDROID_HOME

这就是成功了。

3.创建项目。

注意：接下来操作用如果npm或npx在默认官方仓库中下载第三方模块速度慢或者报错请修改下载仓库，详细npm换源方法可以看我的NPM换源

npm config get registry //查看现在的仓库地址
npm config set registry https://registry.npm.taobao.org //换为淘宝
npm config set registry https://mirrors.huaweicloud.com/repository/npm //换位华为

在想要创建的文件夹下执行命令：cmd

npx react-native init AwesomeProject //AwesomeProject项目包名称

注意这几条注意事项，否则不能创建成功！

这个时候它还只是一个js包，我们需要把它转为APK，执行命令：

cd  victory //进入项目包
npx react-native run-android //生成APK
复制代码

这样就是完成了，同样检查。打开项目包按路径查，看到个这个APK，就是成功了。

中间报了几个错，不重要

第一个是打开模拟器失败，第二个是安装APK失败。

至此，项目以及生成成功，可以用真机或者模拟机运行。夜神模拟器

安装好之后，把项目安装上来。直接拖拽进来就好了。

点击打开：

第一行报错：没有启动服务器，这是时候我们启动项目就好啦。

执行命令：

npm start

接下来让项目和夜神同步就好啦，链接本地电脑的ip和端口号，看图。

执行命令获取本电脑ip：

ipconfig

查看端口，这里我用的是XAMPP查看端口。

找到这两项之后，回到夜神。

点击：

重启夜神：

这样就好啦！打开项目包编辑一下：

react-native学习笔记--史上最详细Windows版本搭建安装React Native环境配置

参考：http://www.lcode.org/react-native/

React native中文网：http://reactnative.cn/docs/0.23/android-setup.html#content

1、安装Jdk（最好默认安装路径尽量别改）

http://jingyan.baidu.com/article/a24b33cd59b58e19fe002bb9.html

http://www.jb51.net/article/36811.htm（三个环境变量都配置）

Java SE Development Kit 8u77 Windows x64187.31 MB jdk-8u77-windows-x64.exe（64位）亲测——必须安装到磁盘根目录

2、安装SDK

最快的方式就是拷同事已经安装好的sdk（如果自己下载的话解决sdk更新慢FQ问题：http://androiddevtools.cn/）

命令行运行adb检测sdk安装成功否

3、安装node.js

下载地址：https://nodejs.org/en/

一路下一步无需配制环境变量点击安装后

node -v的命令来测试NodeJS是否安装成功

4、安装git

下载地址：https://git-for-windows.github.io/

需要配置环境变量参考http://jingyan.baidu.com/album/9f7e7ec0b17cac6f2815548d.html?picindex=1

5.安装react-native命令行工具react-native-cli

git配置完成后可以clone React-native-cli了，建议大家到将react-native-cli克隆到某个盘，不要在c盘直接clone

1) 在命令行中进入你希望RN安装的目录

2) 输入git clone https://github.com/facebook/react-native.git，等待下载

3）进入刚刚目录下的react-native目录下的react-native-cli目录，输入npm install -g

安装好之后，可以命令行下就有react-native命令了

6.创建RN项目

进入你希望创建项目的目录后，输入react-native init AwesomeProject，等待一段时间（较慢）

成功后目录结构

7.运行package

在命令行中进入项目目录，输入react-native start，等待一段时间：成功后

这时候可以用浏览器访问http://localhost:8081/index.android.bundle?platform=android，如果可以访问表示服务器端已经可以了。

8. 安装Genymotion（忽略-不用管）

Genymotion是一个第三方模拟器，它比Google官方的模拟器更易设置且性能更好。但是，它只针对个人用户免费。如果你想使用Google模拟器，请往下看。

下载并安装Genymotion。
打开Genymotion。如果你尚未安装VirtualBox，它有可能会提示你安装。
创建一个模拟器并启动。

虚拟机vm virtualbox启动不了，提示这样的错误，如何解决？

不能为虚拟电脑 Custom Phone - 4.1.1 - API 16 - 768x1280 打开一个新任务.
Unable to load R3 module D:\\New Folder/VBoxDD.DLL (VBoxDD): GetLastError=1790 (VERR_UNRESOLVED_ERROR).
返回代码:    E_FAIL (0x80004005)
组件:    Console
界面:    IConsole {8ab7c520-2442-4b66-8d74-4ff1e195d2b6}

http://zhidao.baidu.com/question/369440038457309444.html?fr=iks&word=%B2%BB%C4%DC%CE%AA%D0%E9%C4%E2%B5%E7%C4%D4+Google+Nexus+4+-+4.4.4+-+API+19+-+768x1280+%B4%F2%BF%AA%D2%BB%B8%F6%D0%C2%C8%CE%CE%F1.++Unable+to+load+R3+module+E%3A%5CVB%2FVBoxDD.DLL+%28VBoxDD%29%3A+GetLastError%3D1790+%28VERR_UNRESOLVED_ERROR%29.++%B7%B5%BB%D8+%B4%FA%C2%EB%3AE_FAIL+%280x80004005%29+%D7%E9%BC%FE%3AConsoleWrap+%BD%E7%C3%E6%3AIConsole+%7B872da645-4a9b-1727-bee&ie=gbk

9.运行项目

（先用数据线连接手机，打开开发者模式，点击允许USB安装。本人MI5手机，在运行项目安装apk时报错，需要关闭：弃用MIUI优化，具体请参考文章：