天天看点
返回

windows下搭建react-native

相信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

直接看图安装：

windows下搭建react-native

第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

 应该可以看到下面界面：

windows下搭建react-native

我们看到列表为空，是因为我们还未连接任何设备。我通过USB接入手机，再运行看看：

windows下搭建react-native

我们可以看到设备号为 

JNIJP7NFZ5JZYDWK

 已经连接成功，这就是我那吊炸天的红米手机！ 我们还可以运行Android模拟器， react-native中文官网 推荐 Genymotion。不过Genymotion依赖VirtualBox(虚拟机)，如果你懒得折腾，还可以下载其他模拟器，比如 BlueStacks 等等。

第8步：编译运行Android

我们进入AwesomeProject目录， 

$ cd AwesomeProject

 ，然后在AwesomeProject目录下运行 

$ react-native run-android

 ，就会构建工程并自动安装到你的模拟器或者设备，同时启动用于实现动态代码加载的Node服务。说的轻巧，第一次运行的时候，会下载 gradle 文件，然而在我们的办公网络环境运行就会报下面的错：

windows下搭建react-native

我的解决办法是：

  • 先到 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步所说的，你的设备已经正确连接。说实话，我运行的时候，事情远没这么顺利，再看一个奇怪的报错：

windows下搭建react-native

解决办法 ： 将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，摇晃一下设备，就会看到下面的界面：
    windows下搭建react-native

我们可以设置本地服务器环境解决： 

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

react-native react windows react reactnative react-native部署
上一篇: react-native常用来兼容手机ppi
下一篇: Git下载安装配置

继续阅读