React-Native的Android环境搭建

React-Native的Android环境搭建

前言

假如你是一位IOS开发者,那么配置这个开发环境你可以不用看了,因为这个是给Android开发者看的,因为IOS太简单啦,根本不需要什么教程.但是对于Android开发者来说,还是需要做一些工作的.废话不多说,我们开始吧.(最好确保你的电脑能翻墙,请使用科学上网.)

1.检查

请检查你的电脑以下环境变量配置没有:

• jdk的环境变量(java版本jdk8)
• Android_Home的环境变量.(也就是SDK目录位置)
• adb的环境变量

可选的环境变量

• android SDK中tools的环境变量
• android SDK中platform-tools的环境变量.

2.安装一些必要的组件

(1)安装 Chocolatey

这里说明下Chocolatey可以安装也可以不安装,因为他的作用是安装其他的软件,如果不安装,那么你可以直接去对应的官网下载也是可以的.请以管理员的身份打开命令提示符,(PS:右键即可看到以管理员方式打开),然后输入如下命令:

@powershell -NoProfile -ExecutionPolicy Bypass -Command “iex
((new-object net.webclient).DownloadString(‘https://chocolatey.org/install.ps1‘))”
&& SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin

安装成功演示:

(2)安装 python

打开命令提示符,运用刚才的Chocolatey安装:

choco install python2(注意不支持python3版本,请安装python2)
或者直接到官网下载,PS:Chocolatey安装直接配置了python的环境变量,不知道官网下载安装后会不会自动配置,如果没有,请手动配置.安装成功演示:

(3)安装Node.js

React-Native以Node.js做为server端调试,运行.而且初始化项目需要用到npm命令,node.js必不可少.打开命令提示符,运用刚才的Chocolatey安装:

choco install nodejs.install.(node.js的7.1版本无法在windows上运行,去官网下载请避开这个版本)
或者直接到官网下载,PS:Chocolatey安装直接配置了python的环境变量,不知道官网下载安装后会不会自动配置,如果没有,请手动配置.安装成功演示:

安装完npm后请设置国内镜像,以加速后面的过程, 命令如下:
npm config set registry https://registry.npm.taobao.org –global
npm config set disturl https://npm.taobao.org/dist –global

(4)安装Yarn、React Native的命令行工具

React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。后面使用React的命令需要用到,例如init,start,run等.如下命令:

npm install -g yarn react-native-cli.(npm命令是node.js的命令指示)安装成功演示:

(5)Android Studio相关

首先你得安装好Android Studio吧,每一个Android开发者都有的啦,如果你还在用eclipese,那么请你关了这篇教程,对你没用了.这个就不用说了吧,不然还怎么玩,注意.请安装2.0以上的版本,否则不支持.这里我们区分下在真机上运行和不在真机上运行两种方式.一般推荐真机,模拟器什么的毕竟和真实环境多少有点差距,所以一般不推荐模拟器.

在真机上运行,你需要做:

• 打开android sdk manager下载Android 6.0(API 23)下的Google APIs,SDK Platform.这里解释下原因,因为React Native的编译环境是6.0,所以必须要下载这个.如下所示(注意: ReactNative只支持4.1及以上的系统):
  

• 在tools目录下下载Android SDK Build-Tools 23.0.1.同理,React Native的构建工具依赖这个版本,如下所示:
  

• 在Extras目录下,下载Android Support Repository,Android Support Library,如下所示:
  

在模拟上运行,你需要做:

首先你要决定你要用什么模拟器,当然是需要点逼格的,市场上模拟器已经有很多了,基本都很流畅.国外的比如Genemotion,国内的比如海马玩,蓝光,夜神等等,太多了,数都数不完.当然,你也可以用Google模拟器,Studio中启动就行了,但是流畅度一般般,当然比以前好多了.这里推荐Genemotion,最好的Android模拟器,没有之一.(注意: ReactNative只支持4.1及以上的系统)

• 第一,检查你是否安装HAXM加速驱动和Android Device Emulator.(不用Google模拟器的跳过这一步)
• 第二,打开android sdk manager下载Android 6.0(API 23)下的Intel x86 Atom System Image、Intel x86 Atom_64 System Image以及Google APIs Intel x86 Atom_64 System Image.如下所示:
  

(6)可选配置

1.Gradle Daemon.Gradle Daemon可以提升java代码的编译速度.安装命令:

(if not exist “%USERPROFILE%/.gradle” mkdir “%USERPROFILE%/.gradle”)
&& (echo org.gradle.daemon=true >> “%USERPROFILE%/.gradle/gradle.properties”)

2.Git.这个基本上都有.

3.编辑器.这个说起来就篇幅比较长了,放到下篇教程再说明.因为涉及到一些配置问题,当然也可以用最基本的文本编辑器开发也是可以的.

(7)让我们开始RN的开发吧

打开命令提示符cmd,进入到任意一个目录下,注意别在默认目录,会导致项目初始化失败.依次输入如下命令:

react-native init AwesomeProject (该命令代表初始化项目,后面的AwesomeProject 是一个官方demo,托管在npm仓库中.这里可能会很久,请耐心等待,可能几分钟,也可能数十分钟,网的原因,你懂的)
cd AwesomeProject
react-native run-android (代表启动react-native的Android项目,接下来等待即可.注意,此时要连上手机或者打开模拟器,并且只能打开一台,无论模拟器或者是手机,react-native只让一台手机在线,两台不行.可用adb devices命令查看当前设备情况)

假如一切顺利,那么你将会看到如下界面,那么恭喜你成功了.

(8)遇到的一些问题及解决

1.在真机上遇到可能会白屏.请为该应用开启悬浮窗权限.

2.如果设备无法访问服务器.5.0以上机型请使用如下命令:

adb reverse tcp:8081 tcp:8081
5.0以下机型请按如下步骤设置:
首先确保你的电脑和手机设备在同一个Wi-Fi环境下。 运行你的React Native应用。和打开其它App一样操作。 你应该会看到一个“红屏”错误提示。这是正常的，下面的步骤会解决这个报错。 摇晃设备，或者运行adb shell input keyevent 82，可以打开开发者菜单。 点击进入Dev Settings。 点击Debug server host for device。输入你电脑的IP地址和端口号（譬如10.0.1.1:8081）。打开命令提示符并输入ipconfig来查询你的IP地址。

3.假如在react-native init AwesomeProject 命令下卡住很久,请参考前文设置国内npm镜像.

4.加入在运行react-native run-android时报错，报错信息中含有Unable to upload some APKs!字样.请对项目中build.gradle文件中的gradle版本进行降级.