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

最新推荐文章于 2025-11-01 12:52:56 发布

原创最新推荐文章于 2025-11-01 12:52:56 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#跨平台 #mac

本文详细介绍了使用macOS进行跨平台开发的环境搭建过程，包括高效工具homebrew、ohmyzsh及Coda2的安装使用，以及ionic和react-native的环境配置与项目创建流程。

前言

做跨平台，尤其是基于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的前提下：

安装nodejs：brew install node
安装Cordova： npm install -g cordova
安装ionic：npm install -g phonegap ionic

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

ionic创建项目

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

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

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

react-native 环境搭建

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

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

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

react-native的基本使用

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

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

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