React Native是Facebook推出的一个开发IOS和安卓APP的技术。至于更多的详情,这里不再描述,大家可以自行百度它的定义。

目的:

由于我想在一台电脑上同时开发IOS和Android两个APP,所以用的Mac。

这里就讲一讲我在搭建开发环境过程中遇到的坑,也为后面学习该技术的道友指一条坑少的路。

1.安装Homebrew

Homebrew, Mac系统的包管理器,用于安装NodeJS和一些其他必需的工具软件。

打开 mac os里的 终端,直接复制粘贴以下命令,回车:

/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  )

众所周知,由于国内长城的原因,导致可能有很多国外的资源下载不下来或下载速度超级慢。

于是在安装了Homebrew之后,有必要的童鞋也可以设置一下国内的加速源。

我用的是:http://ban.ninja

a.在Mac OS的 终端 里输入 ~/.bash_profile 会打开这个配置文件;

b.然后在里面加上一行:

export HOMEBREW_BOTTLE_DOMAIN=http://7xkcej.dl1.z0.glb.clouddn.com

c.加了之后,按 ESC 键,退出编辑;

d.然后再输入命令 :wq 保存并退出当前配置文件。

e.让刚才的更改生效:source ~/.bash_profile

f.输入下面两句话,查看刚才更改的环境变量是否生效:

echo HOMEBREW_BOTTLE_DOMAIN 会输出 HOMEBREW_BOTTLE_DOMAIN

$HOMEBREW_BOTTLE_DOMAIN 如果看到 http://7xkcej.dl1.z0.glb.clouddn.com 字样,说明我们刚才的配置已经OK了。

2.安装NodeJS

使用Homebrew来安装Node.js。(如果你的电脑上已经装了NodeJS,只要保证版本在5.0及以上,就不用再次安装。)

React Native目前需要NodeJS 5.0或更高版本。本文发布时Homebrew默认安装的是最新版本,一般都满足要求。

brew install node

安装完node后建议设置npm镜像以加速后面的过程(或使用科学上网工具)。

注意:建议不要使用cnpm!cnpm安装的模块路径比较奇怪,packager不能正常识别!

npm config set registry https://registry.npm.taobao.org --global

npm config set disturl https://npm.taobao.org/dist --global

3.安装Yarn、React Native的命令行工具(react-native-cli)

Yarn是Facebook提供的替代npm的工具,可以加速node模块的下载。

React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。

npm install -g yarn react-native-cli

安装完yarn后同理也要设置镜像源:

yarn config set registry https://registry.npm.taobao.org --global

yarn config set disturl https://npm.taobao.org/dist --global

如果你看到 EACCES: permission denied 这样的权限报错,那么请参照上文的homebrew译注,修复 /usr/local 目录的所有权:

sudo chown -R `whoami` /usr/local

安装完yarn之后就可以用yarn代替npm了,例如用yarn代替npm install命令;

用 yarn add 某第三方库名代替 npm install --save 某第三方库名。

注意:目前npm5(发文时最新版本为5.0.4)存在安装新库时会删除其他库的问题,导致项目无法正常运行。

请尽量使用yarn代替npm操作。

4.安装XCode

React Native目前需要Xcode 8.0 或更高版本。你可以通过App Store或是到Apple开发者官网上下载。

这一步骤会同时安装Xcode IDE和Xcode的命令行工具。

虽然一般来说命令行工具都是默认安装了,但你最好还是启动Xcode,并在 Xcode > Preferences > Locations 菜单中检查一下,

是否装有某个版本的Command Line Tools。Xcode的命令行工具中也包含一些必须的工具,比如git等。

5.安装Watchman

Watchman是由Facebook提供的监视文件系统变更的工具。

安装此工具可以提高开发时的性能(packager可以快速捕捉文件的变化从而实现实时刷新)。

brew install watchman

6.安装开发工具

根据你的喜好,选择安装一款开发工具。

我是搞C#的,自然对微软的工具情有独钟,不过也装了两个工具:VSCode和WebStorm。

除此之外,还有很多其他的工具,比如:Sublime Text、还有Facebook自己出品的Nuclide等等。

7.测试安装

注意:init命令默认会创建最新的版本,而目前最新的 0.45 及以上版本需要下载 boost 库编译。

此库体积庞大,在国内即便FQ也很难下载成功,导致很多人无法正常运行iOS项目,中文网在论坛中提供了这些库的国内下载链接。

如果你嫌麻烦,又没有对新版本的需求,那么可以暂时创建0.44.3的版本。

提示:你可以使用 --version 参数(注意是两个杠)创建指定版本的项目。

例如 react-native init MyApp --version 0.44.3。注意版本号必须精确到两个小数点。

于是这里踩坑来了:

boost编译库百度网盘下载地址:http://pan.baidu.com/s/1kVDUAZ9

下载下来后请放置到 ~/.rncache 目录,比如你可以打开 终端,输入:

cd ~ (进入到用户目录)

mkdir .rncache (创建rncache目录,如果有,就不用创建,再次创建时会提示目录已存在)

cp ~/Downloads/boost_1_63_0.tar.gz ~/.rncache/  (复制下载目录文件地址,然后拷贝到rncache目录下)

........ (复制刚刚下载的其他文件)

全部复制完成后,就可以开始init ReactNative项目

react-native init AwesomeProject

cd AwesomeProject

react-native run-ios

然后经过漫长的等待,编译完成后,虚拟机上会打开一个有个react native字样的页面,说明咱们的IOS开发环境搭建成功了!

提示:如果run-ios无法正常运行,请使用Xcode运行来查看具体错误(run-ios的报错没有任何具体信息)。

你也可以在Nuclide中打开AwesomeProject文件夹 然后运行,或是双击ios/AwesomeProject.xcodeproj文件然后在Xcode中点击Run按钮。

8.修改项目

现在你已经成功运行了项目,我们可以开始尝试动手改一改了:

使用你喜欢的编辑器打开index.ios.js并随便改上几行。

在iOS Emulator中按下⌘+R(保存)就可以刷新APP并看到你的最新修改!

9.完成

恭喜!你已经成功运行并修改了你的第一个React Native应用。

一、React Native 搭建开发环境(1)(Mac OS - IOS项目)的更多相关文章

  1. 一、React Native 搭建开发环境(1)(Mac OS - IOS项目篇)

    React Native是Facebook推出的一个开发IOS和安卓APP的技术.至于更多的详情,这里不再描述,大家可以自行百度它的定义. 原因:由于我想在一台电脑上同时开发IOS和Android两个 ...

  2. React Native搭建开发环境 之 --走过的坑

    React Native是使用JavaScript和React编写原生移动应用 我的开发平台是基于windows系统,所以只支持android,要是想开发ios系统,那就只能考虑使用沙盒环境 接下来就 ...

  3. React Native 搭建开发环境

    1.先安装node.js,https://nodejs.org/en/download/ 然后,双击下载好的.msi文件安装即可,安装完成后,打开终端,输出npm -v 即可查看我们刚才安装的node ...

  4. react-native —— 在Windows下搭建React Native Android开发环境

    在Windows下搭建React Native Android开发环境 前段时间在开发者头条收藏了 @天地之灵_邓鋆 分享的<在Windows下搭建React Native Android开发环 ...

  5. react-native —— 在Mac上配置React Native Android开发环境排坑总结

    配置React Native Android开发环境总结 1.卸载Android Studio,在终端(terminal)执行以下命令: rm -Rf /Applications/Android\ S ...

  6. 配置React Native的开发环境

    本文转载自:http://mp.weixin.qq.com/s?__biz=MzIxNjEzNjUzOQ==&mid=402020148&idx=2&sn=ccad14a919 ...

  7. react-native —— 在Mac上搭建React Native Android开发环境

    需要:JDK,Android SDK,Node.js   1.安装JDK 去Java官网下载列表选择Mac OS X x64版   2.安装Android SDK 虽然现在谷歌推荐使用Android ...

  8. 手把手教你在Windows下搭建React Native Android开发环境

    最近看到React Native好像好厉害的样子,好奇心驱使之下体验了一下并将在Window下搭建React Natvie Android环境的步骤记录下来,并有需要的朋友参考.(我都是参考官方文档的 ...

  9. 【转】在Windows下搭建React Native Android开发环境

    http://www.jianshu.com/p/2fdc4655ddf8 安装JDK 从Java官网下载JDK并安装.请注意选择x86还是x64版本. 推荐将JDK的bin目录加入系统PATH环境变 ...

随机推荐

  1. JQuery textarea中val(),text()

    val()是当前输入框的前台显示内容 text()是原始内容, 调试时浏览器审查元素可以发现如果只改变val(),text()值是不会改变的

  2. JavaAppArguments

  3. Tortoise SVN 不显示 Log Message 具体信息的解决方法

    今天加入新项目,在 Tortoise SVN Check out 完项目之后,发现右键 show log 不显示 Log Message 的具体信息: 因为是新加入的项目,问了原来负责这个项目的同事, ...

  4. iOS视频直播初窥:高仿&lt;喵播APP&gt;

    视频直播初窥 视频直播,可以分为 采集,前处理,编码,传输, 服务器处理,解码,渲染 采集: iOS系统因为软硬件种类不多, 硬件适配性比较好, 所以比较简单. 而Android端市面上机型众多, 要 ...

  5. Linux shell入门基础(四)

    四.进程优先级前台后台 01.进程控制 #find /name aaa & #ps aux | grep find #updatedb &  #ps aux | grep update ...

  6. Unity 进度条3D制作(3D版)

    昨天我们一起学习了2D进度跳的制作,那么趁着我们脑海中还残存昨日的记忆,今天继续学习另一种方法: 实现思路:当鼠标悬浮Start按钮->实例化物体并显示进度->100/100->进入 ...

  7. C# 第十版

    地址: https://files.cnblogs.com/files/blogs2014/%E9%AB%98%E7%BA%A7%E7%BC%96%E7%A8%8B%28%E7%AC%AC11%E7% ...

  8. 20165323 学习基础和C语言基础调查

    20165323 学习基础和C语言基础调查 一.技能学习心得 1.你有什么技能比大多人更好? 我觉得我羽毛球打的还行,不能说打得比大多数人好,但是对于一些打羽毛球的要领还是掌握的. 2.针对这个技能的 ...

  9. SVD及其在推荐系统中的作用

    本文先从几何意义上对奇异值分解SVD进行简单介绍,然后分析了特征值分解与奇异值分解的区别与联系,最后用python实现将SVD应用于推荐系统. 1.SVD详解 SVD(singular value d ...

  10. python 协程库gevent学习--gevent数据结构及实战(四)

    一不留神已经到第四部分了,这一部分继续总结数据结构和常用的gevent类,废话不多说继续. 1.Timeout错误类 晚上在调试调用第三方接口的时候,发现有些接口耗时非常多,觉得应该有个超时接口来限制 ...