相信react-native如今的火辣程度已经各位前端攻城师忍不住想撸一把了,特别是听了Techparty 19日在广州分享的react-native专场沙龙之后,已经有同学开始不淡定地想往坑里跳了,来吧!我已经在坑里了,我们一起深埋。
学习react-native也差不多两周了,是时候拿出点东西来给大家分享分享了,我们就先最简单(折腾)的搭环境开始吧! 当然,我说的是windows系统环境,别问为什么不是ios,我不会告诉你是因为,穷! 中文官网 中的安卓环境配置也说明了对windows环境的支持,但是具体安装步骤就只是寥寥几笔,对于我们这种没接触过Android或者IOS开发的前端小白来说,真是要命。还是得规规矩矩按照步骤来,不然真得一步一个坑地走。
下面我就作为一个手机native开发小白来聊聊如何在Windows环境下搭建react-native:
第1步:安装最新版Java
我们在Windows下面搭建react-native环境就是为了开发Android程序,必须有Java环境。
- 下载安装JDK
注意根据自己的机型选择x64还是x86。
官网地址: http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html - 配置环境
这个比较简单,直接看度娘:http://jingyan.baidu.com/article/f96699bb8b38e0894e3c1bef.html
第2步:安装Android SDK
-
下载安装Android SDK
直接下载SDK Tools,然后通过SDKManager安装react-native运行所需要的环境,注意选择x64还是x86。
官网下载地址: https://developer.android.com/sdk/installing/index.html
国内下载地址: http://androiddevtools.cn/
-
配置Android环境
这个跟配置JDK环境变量基本一样,看度娘:http://jingyan.baidu.com/article/f71d603757965b1ab641d12a.html, 记得把SDK目录和platform-tools目录添加到环境变量中。platform-tools加入环境变量是因为它内置了adb命令,方便我们查看设备。
-
设置SDK
根据官网提示,打开Android SDK Manager,我们需要安装以下项目的最新版本:
- Tools/Android SDK Tools
- Tools/Android SDK Platform-tools
- Tools/Android SDK Build-tools
- Android 6.0 (API 23)/SDK Platform
- Extras/Android Support Library
- Extras/Local Maven repository for Support Libraries
直接看图安装:
第3步:安装C++
编译node.js的C++模块时需要用到,我也就一说,其实大部分同学肯定是已经安装了的,因为大家早就已经用上node.js。需要安装的童鞋可以在https://www.visualstudio.com/ 下载Visual Studio 2013或2015,也可选择Windows SDK、cygwin或mingw等其他C++环境。
第4步:安装node.js
这个不用说了,前端童鞋怎能没有node环境!?
第5步:安装react-native命令行工具
折腾了辣么多的依赖环境,终于来到激动人心的部分,我们要开始折腾reac-native啦!首先就是要通过npm安装react-native命令行工具:
$ npm install -g react-native-cli
也可以在 react-native github 通过git clone或者Download ZIP下载解压,然后执行以下代码:
$ cd react-native-cli
$ npm install -g
react-native-cli是一个终端命令,它可以完成其余的设置工作,刚才这条命令会往你的终端安装一个叫做react-native的命令。
第6步:创建react-native项目
有了react-native命令行工具,我们就可以用它在创建初始化一个react-native项目:
$ react-native init AwesomeProject
这个命令会初始化一个工程、下载React Native的所有源代码和依赖包,最后在AwesomePrjoect/iOS/AwesomeProject.xcodeproj和AwesomeProject/android/app下分别创建一个新的XCode工程和一个gradle工程。
如果你网络不怎么样,这里会耗时相当相当久,甚至经常因为网络的原因下载项目失败!所以 react-native中文官网 推荐你使用淘宝镜像:
$ npm config set registry https://registry.npm.taobao.org
当然如果你也可以使用vpn加速,不过我推荐你使用中文官网推荐的 完整的绿色纯净新项目包 。
第7步:运行packager
为了避免一会儿run-android报警告,我们现在先通过下面命令开启运行packager:
$ cd AwesomeProject
$ npm start
如果你碰到了ERROR Watcher took too long to load的报错,请尝试将这个文件nodemodules/react-native/packager/react-packager/src/FileWatcher/index.js中的MAXWAIT_TIME值改得更大一些。
运行packager的目的是让node开启一个服务来实时将我们项目的.js文件编译成功.jsbunde文件,我们可以通过 http://localhost:8081/index.android.bundle?platform=android 来访问到这个文件。 这就是react-native开发native程序的亮点之一,react-native通过实时编译并获取这个文件来做到native app实时热更新。
第8步:链接设备或者模拟器
如果正确配置了Android SDK环境变量,我们在docs命令控制行中运行 adb devices
应该可以看到下面界面:我们看到列表为空,是因为我们还未连接任何设备。我通过USB接入手机,再运行看看:
我们可以看到设备号为 JNIJP7NFZ5JZYDWK
已经连接成功,这就是我那吊炸天的红米手机! 我们还可以运行Android模拟器, react-native中文官网 推荐 Genymotion。不过Genymotion依赖VirtualBox(虚拟机),如果你懒得折腾,还可以下载其他模拟器,比如 BlueStacks 等等。
第8步:编译运行Android
我们进入AwesomeProject目录, $ cd AwesomeProject
,然后在AwesomeProject目录下运行 $ react-native run-android
,就会构建工程并自动安装到你的模拟器或者设备,同时启动用于实现动态代码加载的Node服务。说的轻巧,第一次运行的时候,会下载 gradle 文件,然而在我们的办公网络环境运行就会报下面的错:
我的解决办法是:
- 先到 http://androiddevtools.cn/ 找到gradle-2.4-all.zip这个文件的下载地址:http://pan.baidu.com/s/1c0dcgfe, 将它下载到本地。
- 然后将E:/AwesomeProject/android/gradle/wrapper/gradle-wrapper.properties中的distributionUrl= https://services.gradle.org/distributions/gradle-2.4-all.zip改为distributionUrl=file:///E:/AwesomeProject/gradle-2.4-all.zip,让它本地离线下载。
graddle构建过程中会下载很多jar包,如果出现下载失败,多重试几次。这里简单解释一下gradle(其实我也不太懂,囧...),我的理解是,graddle其实就是一种自动化构建工具,它通过依赖管理自动化编译测试部署等过程产生具体的apk,类似我们前端常用的grunt,gulp等工具。
ok,如果你运行顺利,就能在模拟器或者设备上看到一个名为AwesomeProject的Android App,前提是要确保如第7步所说的,你的设备已经正确连接。说实话,我运行的时候,事情远没这么顺利,再看一个奇怪的报错:
![](http://img1.tuicool.com/feQJBbi.png!web)
解决办法 : 将android/build.gradle文件中的 classpath 'com.android.tools.build:gradle:1.3.1'
改为 classpath 'com.android.tools.build:gradle:1.2.3'
。猜测是插件包不兼容导致。
第9步:运行程序
此时我们便可以打开真机运行AwesomeProject程序啦,初次运行可能会遇到一些坑:
- 程序白屏
请找到并开启AwesomeProject的悬浮窗权限。设置 --> 其他应用管理 --> 已下载 --> 点击AwesomeProject --> 权限管理 --> 显示悬浮窗 --> 允许
。miui系统的设置在此处 。 - Unable to download JS bundle 如果此时你看到一个大红色的报错,那么你成功也不远啦!这个报错是因为app获取不到packager生成的jsbundle文件,我们打开AwesomeProject,摇晃一下设备,就会看到下面的界面:
我们可以设置本地服务器环境解决: Dev settings -> Debug server host & port for device -> 设置电脑IP:port
点击 Reload JS
成功的话就可以看到我们期待已久的Hello World!
第10步:调试程序
再看一下我们通过摇晃设备弹出的菜单选项:
Reload JS
我们修改项目上任何js代码,都可以通过Reload JS
命令查看到最新的改动;Debug JS
这个命令可以 帮助我们在chrome的调试控制台调试react-native代码,我们在chrome浏览器打开 http://localhost:8081/debugger-ui ,然后点击设备的Debug JS
就可以在控制台看到我们程序中打印的console.log,我们还可以断点调试。Disable Live Reload
这个命令默认打开,我们开发过程中保存代码的同时,设备就会实时刷新。检查元素
通过检查元素
我们可以在设备上面看到我们的css元素布局,不过这个功能跟chrome比,真的弱爆了。Disable Perf Monitor
打开可以实时显示程序渲染帧频。Dev Settings
打开开发调试设置。
结语
折腾环境的过程中确实遇到不少的坑,导致前期学习进度进展的相当缓慢,主要原因是自己对手机开发领域的不熟悉,很多概念都要做一番理解,另一方面也是自己阅读文档不够仔细,错过了一些关键的技术细节,当然还有很多无法避免的客观因素,比如网络环境。踩坑的路程还远远没有结束,需要尽快更加详尽地理解react-native的运行机制,才能更快理解每个报错背后的原因,才能更快地解决问题。
原文:http://www.tuicool.com/articles/26byiuZ