react-native 0.40.0 环境搭建踩坑全记录

初学react-native,找了一个课程,使用0.40版本,而现在默认自动安装最新版本0.55,这给我添了不少麻烦,环境配置上也踩了好多坑,好不容易跑通,必须总结一下

1. 安装JDK 1.8(暂不支持更高版本),配置环境变量

react-native 0.40.0 环境搭建踩坑全记录

win10系统,点击开始在菜单,直接打字:环境变量

react-native 0.40.0 环境搭建踩坑全记录

点击新建

JAVA_HOME :  C:\Java\jdk1.8.0_171(你安装java的位置)

react-native 0.40.0 环境搭建踩坑全记录

CLASSPATH :  .;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;(注意前面有个‘.’)

react-native 0.40.0 环境搭建踩坑全记录

Path 中添加 %JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;

react-native 0.40.0 环境搭建踩坑全记录

这样java环境配置完成。

2. 安装android Studio,配置sdk和环境变量

单击configure,选择sdk manager

react-native 0.40.0 环境搭建踩坑全记录

选择三个必选项,如下3个图片

react-native 0.40.0 环境搭建踩坑全记录

react-native 0.40.0 环境搭建踩坑全记录

react-native 0.40.0 环境搭建踩坑全记录

记住sdk目录,用来配置环境变量

react-native 0.40.0 环境搭建踩坑全记录

点击ok,Android会下载所需的SDK

配置环境变量

ANDROID_HOME : C:\Users\ze258\AppData\Local\Android\Sdk

Path :中添加两行,分别是

C:\Users\ze258\AppData\Local\Android\Sdk\tools

C:\Users\ze258\AppData\Local\Android\Sdk\platform-tools

配置好环境变量后,就可以在cmd中使用adb命令

3. 安装夜神模拟器,开启开发者选项

点击设置按钮,点击进入最下面的关于平板电脑

点击5次版本号,就可以开启开发者选项

react-native 0.40.0 环境搭建踩坑全记录

返回上一级,进入开发者选项

react-native 0.40.0 环境搭建踩坑全记录

开启USB 调试

react-native 0.40.0 环境搭建踩坑全记录

打开cmd,输入

adb start-server 启动adb

adb devices 查看已经连接的模拟器

react-native 0.40.0 环境搭建踩坑全记录

4. 安装node.js

5. 在cmd界面搭建react-native 环境

安装react-native-cli脚手架,和yarn工具

cmd中输入命令: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 

6. 创建指定版本的react-native项目

因为我买的课程使用了0.40.0版本的react native,所以需要指定版本

cmd中输入命令: react-native init AwesomeProject --verbose --version 0.40.0 

进入项目: cd AwesomeProject

android/app/src/main目录中创建assets文件夹

然后在根目录中执行如下命令

react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/

assets目录中会生成几个文件

react-native 0.40.0 环境搭建踩坑全记录

7. 启动react-native项目

cmd中输入命令:react-native run-android

模拟器中会装载并启动项目,并弹出React Packager终端,点击模拟器右上角摇一摇,弹出app配置选项,选择dev setting

react-native 0.40.0 环境搭建踩坑全记录

选择Debug server host & port for device选项

输入电脑IP:8081

react-native 0.40.0 环境搭建踩坑全记录

IP可以在cmd中输入ipconfig后看到,端口跟React Package中提示的端口一致:8081

然后修改项目代码,检测模拟器是否可以加载,点击Enable Live Reload,开启热加载

react-native 0.40.0 环境搭建踩坑全记录