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

时间:2022-03-30 22:13:32

参考: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,等待一段时间(较慢)

成功后目录结构

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

7.运行package

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

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

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

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,时间较长)

运行成功后出现下图

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

10.第一次手机肯定报错

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

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

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

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

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

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

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

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

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