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

Posted 2020-08-25 深入学习ing

参考：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模拟器，请往下看。

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

虚拟机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优化，具体请参考文章：

react-native学习笔记--首次安装apk到小米5报错

）

刚刚运行package的命令行不要关闭，重新启动一个新的命令行，

进入项目目录，输入react-native run-android

等待运行(如果是第一次运行，首先会下载gradle，时间较长)

运行成功后出现下图

 

 

10.第一次手机肯定报错

 

 

点击Dev Settings后，点击Debug server host & port for device,设置IP和端口

 

 

这里的IP是电脑的IP，不知道的可以在命令行中输入ipconfig进行查询，端口号固定8081

 

 

设置完成后，回到空白页面，再次摇一摇手机，选择Reload JS，程序就运行起来，出现Welcome to React Native！