手把手教你在Mac中搭建iOS的 React Native环境

原文地址:http://www.cnblogs.com/damnbird/p/6074607.html

这篇博文真的很好用,我按照这个博文写的搭建react Native 环境,中间没有出现任何差错,直接全部成功了,非常开心,也非常意外!所以特别推荐需要的小伙伴们拿去使用。
ps:我的mac版本是10.11.6,型号是MacBook Pro。

补充:
测试安装

react-native init 项目名
cd 项目名
react-native run-ios

注意:init命令默认会创建最新的版本,而目前最新的0.45及以上版本需要下载boost库编译。此库体积庞大,在国内即便翻墙也很难下载成功,导致很多人无法正常运行iOS项目,推荐暂时使用0.44.3的版本。

提示:你可以使用--version参数(注意是两个杠)创建指定版本的项目。例如react-native init MyApp --version 0.44.3。注意版本号必须精确到两个小数点。
提示:如果run-ios无法正常运行,请使用Xcode运行来查看具体错误(run-ios的报错没有任何具体信息)。

准备工作
1.你需要一台Mac电脑。。(这不是废话?我所用的是Air~~穷。。)

2.我所操作的电脑系统环境是

3.xcode版本:8.0正式版

必需的软件
1.Homebrew
Homebrew, Mac系统的包管理器,用于安装NodeJS和一些其他必需的工具软件。
打开终端,执行
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

如果在在Max OS X 10.11(El Capitan)版本中,homebrew在安装软件时可能会碰到/usr/local
目录不可写的权限问题。可以使用下面的命令修复:
sudo chown -R whoami /usr/local

安装完成后:进过一系列等待后,

(其中安装需要输入电脑密码)

2.Node
使用刚刚安装的Homebrew来安装Node.js
brew install node

安装完成后

3.安装完node后建议设置npm镜像以加速后面的过程,否则后面插件安装巨慢
npm config set registry https://registry.npm.taobao.org --globalnpm config set disturl https://npm.taobao.org/dist --global

4.安装Yarn
Yarn是Facebook提供的替代npm的工具,可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。
npm install -g yarn react-native-cli

安装完成后


5.Watchman
Watchman是由Facebook提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能(packager可以快速捕捉文件的变化从而实现实时刷新)。
brew install watchman

6.Flow
Flow是一个静态的JS类型检查工具。译注:你在很多示例中看到的奇奇怪怪的冒号问号,以及方法参数中像类型一样的写法,都是属于这个flow工具的语法。这一语法并不属于ES标准,只是Facebook自家的代码规范。所以新手可以直接跳过(即不需要安装这一工具,也不建议去费力学习flow相关语法)。
brew install flow

以上操作完成后,环境基本打好,缺的是一个IDE,既然React Native是Facebook的玩意,那就用Facebook推荐的方案吧,这里采用Atom+Nuclide插件

1.安装Atom
下载地址 (这蛋疼的下载地址,每秒只有几KB,建议翻x下载)
下载完成后解压,打开

打开正常后,我们安装Nuclid,有两种方式,图形化下载安装和命令行,两种都说一下
1.图形化安装:
点击菜单栏:Atom->Preferences,或者可以”Command+,”快捷打开
然后,在Install Packets的输入框中,输入nuclide,出现的第一个就是我们想要安装的,点击install
安装完成后就会有上图红色圈中的菜单栏

2.命令行安装:
apm install nuclide

命令行安装完成后,打开Atom,选择Packages->Settings View->Manage Packets
然后选择Packages,Nuclide中点击Settings


然后往下滚动找到如图选项打钩
[图片上传中。。。(7)]

然后重启Atom,就会执行相关安装,到这里,所有安装完毕!。

最后,我们创建一个工程试验一下。。
用命令行cd到桌面,然后
react-native init 项目名称

项目创建完毕后的文件夹内容如图。。。。

image.png

如果你直接用xcode打开.xcodeproj运行,结果将会是:

image.png

这是没写过一行代码的项目,如果你要修改一下,可以打开Atom,点击Add project folder ,找到你刚才创建的工程打开,

image.png

打开后文件目录:

image.png

可以发现我这里打开的是ios.js,如果是安卓的伙伴当然是打开android.js
然后,你就可以随意开发了。。。。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 尽管在移动开发中,原生APP的开发成本很高,但现阶段基于原生开发仍然是必须的,因为Web的用户体验仍无法超越Nat...
    奔跑的大橙子阅读 10,744评论 0 11
  • 看到这幅剧照,想起1998年这个时候,还珠格格开始热播,一时间风靡大江南北。别的地方我不知道,反正我们那儿每到中午...
    葛东生阅读 4,702评论 0 0
  • 韶光易逝,一如姹紫嫣红,不过转瞬间。谁家女子不希望在年华正好之时遇见那个正好出现的人,姻缘这般才羡煞人。 (一)“...
    我是魔眼睛阅读 4,429评论 34 33
  • 在芝麻街英语第四天,宝贝得到了老师的表扬,萱萱愿意跟着老师一起说英文。
    萱妈阅读 1,400评论 0 0
  • 有一句话叫做:你认为一个人是什么样的,这个人在你面前就会是什么样的。 这是一种先入为主的思维定势,当你给一个人下了...
    心理师云阳阅读 1,950评论 0 1

友情链接更多精彩内容