ionic和react-native基于MAC平台的环境搭建

前言

做跨平台，尤其是基于ionic和react-native的跨平台开发，强烈推荐使用macos。

高效工具推荐

1.homeberw 。

官网：http://brew.sh/

mac安装homebrew只需要执行一条脚本就可以。在homebrew官方有教程和安装脚本的语句。或者执行如下语句也能够进行安装。记得要全部粘贴。macos自带ruby脚本 不需要单独安装。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

2.oh my zsh 。

官网：http://ohmyz.sh/
安装教程和是用教程，官方也有。安装可执行如下任何一条语句。

sh -c "$(curl -fsSL https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

sh -c "$(wget https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh -O -)"

3.coda2
我一直使用的就是coda2，不过需要单独做破解。能够编写很多很多种语言，而且代码补全和联想以及代码模板非常丰富，并且自带很多协议，能够直接进行预览等优点。

ionic 环境搭建

macos部署ionic比较方便。
首先在安装homebrew的前提下：

1. 安装nodejs：brew install node
2. 安装Cordova： npm install -g cordova
3. 安装ionic：npm install -g phonegap ionic

需要注意的是：在安装nodejs的时候一定要安装4.X版本以上。brew 安装的时候直接检索的是最高版本，我安装的是6.X。另外在安装过程中会提示找不到node-gyp的话，就手动安装以下。还有一些组建会提示更新，通过npm直接手动更新就可以。安装完成如果提示缺失组建，可以通过npm -list进行查看已经安装的组建，然后进行相应操作。如果提示需要更新minimatch，这个在安装完成之后手动执行以下update就行。在安装ionic的时候，会有卡顿或者安装失败，这个正常，多尝试几次就可以，有时候会因为网络等原因造成中断进而导致失败。

ionic创建项目

1. ionic start myapp （后面可加blank，tabs两种模板声明，还有几个记不清楚了）
2. ionic platform add android （添加android平台，添加ios也这样操作。然后ionic会在platform这个目录里面生成关于平台的代码以及一些脚本文件，这些脚本分android和ios两个版本，ionic也是通过这种方式实现的跨平台。里面的目录结构和正常的as目录结构差不多，还有gradle配置文件）
3. ionic build android （构建android项目，构建ios也是这样的。构建成功之后可以在build，output目录下找到生成的apk）

4. ionic run android （在有模拟器或者真机设备的情况下，启动android）

   如果不适应这种命令行的操作方式，可以使用ionic lab 这个可视化工具。需要翻墙。官方网站是:http://lab.ionic.io/

IONIC Macos 环境搭建基本就算完成了。

react-native 环境搭建

承接上文，在正确安装nodeJs的前提下，在增加几个工具，就可以安装react-native了。步骤如下

1. brew install nvm （nvm 比npm速度快一些，不过我没什么感觉，它和npm使用方式基本一样）
2. brew install watchman （React修改source文件的一个工具）
3. brew install flow （js脚本的类型检查器）
4. npm install -g react-native-cli （开始安装react-native）

如上四步，就完成了react-native的环境搭建

react-native的基本使用

1. react-native init myApp (创建名为myMpp的项目，需要很长一会时间，不过可能也是网速的原因，在这里，它会在myApp的并行目录生成一个node_mobiles的目录，里面会有很多的支撑文件，不要随意改动就哦了)
2. cd myApp （切入到项目目录）
3. react-native run-android （运行android）

react-native 会直接生成android和ios，所以不需要添加平台。

大概就是这样的部署节奏。稍后补充支撑快速开发的cordova插件信息。react-native我之前没怎么玩过，主要还是在弄ionic，所以我先把ionic相关的一些技巧，还有cordova现有的快速开发插件，在稍后的博文中进行阐述，希望对大家有所帮助，进而与大家产生良性沟通。