React Native搭建之旅

最近很久没更新技术类博客，只是没找到合适的东西来讲解。

1.2016度最火的前端三大框架

Vue.js、Angular.js、React.js

1.Vue

我们公司的微信公众号就是用Vue进行重构的，其选择Vue这个框架的核心就是适合移动端、规模小的团队。其特点是轻量，MVVM，组件化。

2.Angular

Angular和Vue一样，也是个MVMM框架。与后台的思想如依赖注入、控制反转等。其核心是适合规模大的团队，特点适合数据展示类产品，如公司管理后台等。其特点是依赖注入、双向绑定等MVVM特性。

3.React

React准确来说只是MVC中的View层。只负责UI渲染。其特点是虚拟DOM、组件化。

2.React Native

1.简单介绍

React Native指用React.js来开发IOS和Android原生App。其特点是Learn once, write anywhere。(一次学习，随处开发) 为什么想学React Native？ 还记得之前做过的App，叫“一起玩吧”，其特点是使用Cordova进行开发。Cordova其特点是可以用HTML、CSS、JavaScript实现页面的制作，然后运行在Webview上。本质上说渲染的页面还是Web，而非原生。 而React与Cordova不同，React通过封装原生组件来供JS来调，这在一定程度上提升了用户体验，而且性能上要好太多。

2.目前React Native状况

既然React Native比Cordova性能上要好太多，为什么很多公司没在使用呢？ 原因如下： 1.React对开发人员要求较高，不是懂点Web技术就行的，当官方封装的控件、API无法满足需求时，就必然需要懂一些Native的东西去扩展，扩展性仍然远远不如Web，也远远不如直接写Native Code。

2.（引）官方说得很隐晦：learn once, write anywhere。人家可没说run anywhere。事实上，从官方的API来看sliderIOS，switchIOS..等等这些控件，之后势必会出现SliderAndroid，SwitchAndroid...，也就是很可能针对不同的平台会需要写多套代码。

3.发展还不成熟，目前很多ui组件只有ios的实现，android的需要自己实现。（引）从Native到Web，要做很多概念转换，势必造成双方都要妥协。比如web要用一套CSS的阉割版，Native通过css-layout拿到最终样式再转换成native原生的表达方式（比如iOS的Constraint等属性），再比如动画。另外，若Android和iOS都要做相同的封装，概念转换就更复杂。

4.文档还不够完整 学习曲线偏高。

3.React Native环境搭建

React Native学习曲线果然偏高，光React Native的环境搭建就花了我周末整整两天时间，共10小时，周六从晚上8点弄到凌晨2点，周末10点弄到下午3点。

最近在react native中文网看到了很多用react.js开发的App。无意间看到一款名为“在球场”的App，在App Store、Google Play和腾讯应用宝。运行后感觉棒棒哒，特别适合学习，因为有其对应的博客、Lite版源码、还有网易云视频教程，于是爽快买了教程准备开始学习React。

环境搭建可以分为IOS环境的搭建和Android环境的搭建。 博主用的Mac，所以环境搭建基本是在Mac OS系统上工作。 Mac自带IOS环境，所以不需要怎么搭建，直接打开Xcode运行即可。 Android环境搭建需要： 1.安装Java JDK1.8 2.配置JAVA_HOME系统环境变量 3.安装Android SDK和Android Studio 4.配置ANDROID_HOME系统环境变量 5.安装安卓模拟器 6.需要一台Android设备（可选） 这只是Android环境最最基本的准备工作，后面的坑也特别多。

除此之外，如果你需要将app android打包成apk，将app ios打包成ipa，运行在真实设备上，还需要搭建打包环境。

4.安装运行React Native在球场Lite版详解

1.安装React Native

/*a.安装Homebrew，通过这个能使用brew命令*/
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
/*是否安装成功，成功显示版本号*/
brew -v

/*b.使用brew命令安装node和watchman*/
brew install node
brew install --HEAD watchman

/*是否安装成功，成功显示版本号*/
node -v
watchman -v

/*c.使用node的npm命令安装react native脚手架*/
sudo npm install -g react-native-cli

/*是否安装成功，成功显示版本号*/
react-native -v

2.获取在球场Lite版源码及依赖包

git clone https://github.com/jaggerwang/zqc-app-demo.git

cd zqc-app-demo 

npm install

3.在苹果模拟器Simulator上运行在球场App

在此之前需要打开node_modules/react-native-wechat/ios/RCTWeChat.m注释掉15Line，否则会报错：

// #import <RCTImage/RCTImageUtils.h>

1.打开Simulator模拟器

2.使用react-native命令运行在球场

react-native run-ios

/*运行需等待一段时间，当出现以下字段即安装成功*/
** BUILD SUCCEEDED **
Installing build/Build/Products/Debug-iphonesimulator/zaiqiuchang.app

模拟器出现以下图片则运行成功：

3.调试App 既然运行成功在球场App，那就玩玩呗。 首先需要注意： a.应用内的红屏或黄屏提示都只会在开发版本中显示，正式的离线包中是不会显示的。 b.想修改文件内容，需要授权到最高权限，输入sudo chmod -R 777 zqc-app-demo c.想直接输入，请修改链接硬件键盘（图1） d.运行IOS模拟器时按键 Command + D出现Debug主菜单（图2） e.只要不修改原生代码，就可以通过Reload来查看新的修改效果，无需重新编译。开发效率因此得到非常大的提升，这也是RN开发相比原生开发的一大优势。

5.通过Xcode打包成ipa

如果想运行在IPhone上，可以打成ipa安装包。 最简单的方法如下：

1.安装Xcode插件AMAppExportToIPA-Xcode-Plugin

AMAppExportToIPAg在GitHub网站：https://github.com/MellongLau/AMAppExportToIPA-Xcode-Plugin

2.打开Xcode找到Products下面的app，右键出现Export IPA，点击即可打包成功，是不是很爽！