React-Native Android环境搭建

2018.9.26 mac 下搭建react native:
搞了好久,就是因为cnpm,还是去年写下这个demo,其实在mac下搭建react native跟着官网走,不是很困难,就怕随心所欲的使用,例如cnpm,至少在react native中是完全不能用的,

1.主要问题是,react-native 已经到0.57.1,对babel的依赖有所增加,需要安装@babel/runtime
2.先npm install @babel/runtime 再npm install ,最后在react native run ios
3.有第二步是因为我,在react native run ios 时报错,如果没有,可以跳过第二步

React-Native Android环境搭建

最近一个星期,每天都是上午写业务代码,下午搞搞react-native,个人是这样认为的,首先自己能够独立把开发环境搭起来,其次就是测试,要么调用真实机,要么使用模拟器来辅助开发,没有Mac,只有台式机,所以就装了Android的开发环境,下面是几天的效果:


React-Native Android环境搭建

  1. 安装java SDK,(我在公司的台式机上装的是8.x的版本可以用,但是在家里的笔记本上装的是9.x的版本出了个错,然后我又退回8.x的版本,就好了)。下载地址:http://www.oracle.com/technetwork/java/javase/downloads/index-jsp-138363.html

  2. 安装Android Studio,

1、在SDK Platforms窗口中,选择Show Package Details,然后在Android 6.0 (Marshmallow)中勾选Google APIs、Android SDK Platform 23、Intel x86 Atom System Image、Intel x86 Atom_64 System Image以及Google APIs Intel x86 Atom_64 System Image。

React-Native Android环境搭建

2、在SDK Tools窗口中,选择Show Package Details,然后在Android SDK Build Tools中勾选Android SDK Build-Tools 23.0.1(必须包含有这个版本。当然如果其他插件需要其他版本,你可以同时安装其他多个版本)。然后还要勾选最底部的Android Support Repository.

React-Native Android环境搭建

3、ANDROID_HOME环境变量
确保ANDROID_HOME环境变量正确地指向了你安装的Android SDK的路径。
(路径为:Android SDK Location:指向的路径)(安装时路径要记一下)
打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建

React-Native Android环境搭建

4、将Android SDK的Tools目录添加到PATH变量中
你可以把Android SDK的tools和platform-tools目录添加到PATH变量中,以便在终端中运行一些Android工具,例如android avd或是adb logcat等。
打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 选中PATH -> 双击进行编辑
tools和platform-tools的路径也是Android SDK Location指向的路径下(一再强调安装时路径要记一下)

React-Native Android环境搭建

5、安装react-native命令行工具
npm install -g react-native-cli

准备初始化项目

6、创建项目
进入你的工作目录,运行
react-native init MyProject

查看下项目有无成功创建

7、在项目下运行react-native start,等包下载完访问 http://localhost:8081/index.bundle?platform=android
如下图出现大片js代码,代表成功

React-Native Android环境搭建

连接安卓手机

8、开发者模式下,使用usb连接,并在电脑上安装手机的驱动程序,
检查是否有设备接入:在Git Bash Here中切换到项目目录下,使用adb diveces
如果是出现unauthorized(没有授权),需进行授权,断开设备,重新进行usb链接,

React-Native Android环境搭建

9、运行项目
保持packager开启,我使用的是vscode,所以增加一个命令行react-native run-android
如果出现问题可访问https://github.com/facebook/react-native/issues/10787

React-Native Android环境搭建

10、使用Genymotion模拟器,下载安装,可能下载得时候需要*进行注册(这里自行解决),安装好了选择一个自己喜欢的机型添加并下载包,保存后,重启项目,应该可以在模拟器中跑起来
这里需要注意一个问题,笔记本默认是没有开启虚拟化设置,参考下面设置一下就ok. https://jingyan.baidu.com/article/335530daa55d7e19cb41c3c2.html

React-Native Android环境搭建