Mac 搭建 React Native 环境踩坑记

我的第一篇文章。初到此地,请大家多多关照。

不想看我 BB 的,跟着官网的 搭建开发环境 步骤走,基本不会有问题,注意选择指定的版本,推荐选择最新的当前版本

必须安装的软件

Homebrew,Node.js,Watchman,react-native-cli

Homebrew

linux系统有个让人蛋疼的通病,软件包依赖,
好在当前主流的两大发行版本都自带了解决方案,Red hat有yum,Ubuntu有apt-get
 神马,你用mac os,不好意Mac os木有类似的东东,
泪奔中几经折腾总算找到了第三方支持:Homebrew,Homebrew简称brew,
是Mac OSX上的软件包管理工具,能在Mac中方便的安装软件或者卸载软件,
可以说Homebrew就是mac下的apt-get、yum神器。
  • 是否必须安装?
    Node 也可以通过 官网 安装,但是 Watchman 只能通过 Homebrew 安装。为啥要安装 Watchman ?这个后面说。
    总之,你可以看看后面作者踩的坑再决定安不安装,一来可以尝试不安装 Watchman 会怎么样,二来,下载这些的过程中会下载很多依赖包,占空间不说,主要是慢!很慢!非常慢!

  • 怎么安装
    官网 首页大字就有,终端输入

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

列出了一大堆需要安装的文件,下载速度 30kb/s,文件总大小 21.95 Mb。居然还有 ==> The Xcode Command Line Tools will be installed. Xcode 的命令行工具也给你装了。如果 Xcode 已经装了这个,应该可以避免。可以在 Xcode -> Preferences -> Locations 菜单检查是否已安装。等了很久很久,上面的都下完了,跟着开始了下载另一个文件并且报错,踩坑了。

==> Downloading https://homebrew.bintray.com/bottles-portable/portable-ruby-2.3.3.leopard_64.bottle.1.tar.gz
#######################################                                   55.3%
curl: (56) SSLRead() return error -9806
Error: Checksum mismatch.
Expected: 34ce9e4c9c1be28db564d744165aa29291426f8a3d2ef806ba4f0b9175aedb2b
Actual: d9569b8c254e6041413b7bfa569ad17b6011cbf4f6e8ec506e766760f07bbb1c
Archive: /Users/***/Library/Caches/Homebrew/portable-ruby-2.3.3.leopard_64.bottle.1.tar.gz
To retry an incomplete download, remove the file above.
Error: Failed to install vendor Ruby.
Failed during: /usr/local/bin/brew update --force

心里一顿***之后沉着冷静下来发现这是一个文件没下下来而已,可以手动下载。
浏览器打开 portable-ruby-2.3.3.leopard_64.bottle.1.tar.gz 下载,下载很慢 4kb/s,半个小时都没下好,改用迅雷试了下,1分钟就下好了。下载的文件放在 /Users/***/Library/Caches/Homebrew/portable-ruby-2.3.3.leopard_64.bottle.1.tar.gz 路径下,记得把之前的残留同名文件删除,或者直接替换。
到这里事实上 Homebrew 已经装好了,作者这里直接用 brew 命令安装软件去了,其实可以输入 brew update 看看有没有其他报错,brew install 命令也会先执行 update,都一样。

设置国内镜像源:中科大清华大学Coding.netban.ninja

替换brew.git:
cd "$(brew --repo)"
git remote set-url origin https://mirrors.ustc.edu.cn/brew.git

替换homebrew-core.git:
cd "$(brew --repo)/Library/Taps/homebrew/homebrew-core"
git remote set-url origin https://mirrors.ustc.edu.cn/homebrew-core.git

官方:https://github.com/Homebrew/brew
https://github.com/Homebrew/homebrew-core

中科大:https://mirrors.ustc.edu.cn/brew.git
https://mirrors.ustc.edu.cn/homebrew-core.git

清华大学:https://mirrors.tuna.tsinghua.edu.cn/git/homebrew/brew.git
https://mirrors.tuna.tsinghua.edu.cn/git/homebrew/homebrew-core.git

Coding.net:https://coding.net/u/homebrew/p/homebrew/git
  • 顺便说下怎么卸载,找到两个方法,自己看着办吧
1.
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/uninstall)"

2.
cd `brew --prefix`
rm -rf Cellar
brew prune
rm `git ls-files`
rm -r Library/Homebrew Library/Aliases Library/Formula Library/Contributions
rm -rf .git
rm -rf ~/Library/Caches/Homebrew

Node.js

  • 是什么
    Node.js 是一个 JavaScript 运行环境,这个必须装了,不装没法跑 React Native。
    先看看自己有没有装过,终端输入 npm,显示 npm: command not found 果然没有。

  • 怎么安装

  1. 官网 直接安装,下载 pkg 安装包直接安装。完成后显示(以 8.9.4 版本为例)
This package has installed:
* Node.js v8.9.4 to /usr/local/bin/node
* npm v5.6.0 to /usr/local/bin/npm
Make sure that /usr/local/bin is in your $PATH.

用 Homebrew 规范管理
/usr/local/lib/node 文件夹中的内容移到 /usr/local/Cellar/node/8.9.4/ 目录下(版本号根据自己下载的版本号设定),然后输入命令行

brew switch node 8.9.4
  1. 通过 Homebrew 安装
brew install node

说实话作者没成功。先通过 pkg 安装了。然后为了验证用 Homebrew 安装,卸载了之前安装的 Node,可能是卸载有残留,安装完后 npm 命令显示 npm: command not found
按照网上的办法 uninstall,删除相关文件,再重新安装,仍然没有解决。

另外,通过 Homebrew 不能安装指定 node 版本或者非常麻烦。默认安装的是最新的不稳定版本,可能有些模块与稳定版本不一致或者被废弃。网上资料说

1、安装 homebrew-version
brew tap homebrew/versions
2、查看可安装的node版本
brew install homebrew/versions/node

作者兴致勃勃的输入第一条命令,结果,WHAT ?

Warning: homebrew/versions was deprecated. 
This tap is now empty as all its formulae were migrated.

算了不折腾了,就用官方 pkg 安装吧,Homebrew 的下载速度也没有手动下载快,还这么麻烦。

Watchman

  • 是什么
    React Native 通过 Watchman 来监视代码文件的改动并适时进行编译。就像 Xcode 在每次文件被保存时对文件进行编译。

  • 是否必须安装?
    看起来好像是必须的,如果不安装可能会遇到 BUG ? 无法正常开发?作者不信,安装完了之后,把它删除了,重新跑了下项目,居然正常运行,改一下代码运行也正常显示了改动后的结果。所以,不安装到底会怎样,作者也不知道,也许是安装完后删除有残留之类的。不过既然大家都说可能会有问题,为了保险,还是安装吧。

  • 怎么安装

brew install watchman

命令是很简单,只不过,运行后显示
Installing dependencies for watchman: autoconf, automake, libtool, pkg-config, openssl, pcre
各种依赖包需要下载。最讨厌的就是为了下一个东西,下一堆乱七八糟的东西。这就算了,还巨慢!简直**不能忍。openssl 这种东西不是
mac 内置的么?就不能兼容一下么!
半个小时之后,它会完成的......

react-native-cli

React Native 的命令行工具,必须安装。
yarn 是替换 npm 的工具,据说可以加速 node 模块下载。用不着,暂不安装了。

sudo npm install -g react-native-cli

我这需要 sudo 权限。很快,瞬间完成。测试 react-native 命令正常,安装成功。

创建项目

cd 到想要创建的文件夹下
react-native init AwesomeProject

会在当前目录下创建名为 AwesomeProject 的工程。文件总大小 129.4MB,所以需要花点时间。

运行

  1. 使用命令行工具运行。
cd AwesomeProject
react-native run-ios
  1. 使用 Xcode 运行
    使用 Xcode 打开 AwesomeProject/ios/AwesomeProject.xcodeproj,然后像运行 iOS 项目那样,点击 Run 按钮。

运行的时候,有个坑。
编译进度卡在 double-conversion Running 1 of 1 custom shell scripts
因为需要用到几个第三方库来编译,而这个库下载非!常!慢!
查看 ~/.rncache/ 目录下果然有几个没下载好的文件。(在运行前没有 rncache 文件夹)
所以需要做的,就是下载好第三方库,放到 rncache 目录下。参考 解决办法

查看需要的依赖包:https://github.com/facebook/react-native/blob/master/scripts/ios-install-third-party.sh
branch 需要修改为对应的版本
看到以下代码就是需要的第三方库了:
fetch_and_unpack glog-0.3.4.tar.gz https://github.com/google/glog/archive/v0.3.4.tar.gz 69f91cd5a1de35ead0bc4103ea87294b0206a456 "\"$SCRIPTDIR/ios-configure-glog.sh\""
fetch_and_unpack double-conversion-1.1.5.tar.gz https://github.com/google/double-conversion/archive/v1.1.5.tar.gz 96a8aba1b4ce7d4a7a3c123be26c379c2fed1def
fetch_and_unpack boost_1_63_0.tar.gz https://github.com/react-native-community/boost-for-react-native/releases/download/v1.63.0-0/boost_1_63_0.tar.gz c3f57e1d22a995e608983effbb752b54b6eab741
fetch_and_unpack folly-2016.09.26.00.tar.gz https://github.com/facebook/folly/archive/v2016.09.26.00.tar.gz f3b928b5039235bad6cece638c597c6684d1e4e6

取其中的文件网址下载。boost_1_63_0.tar.gz 迅雷就是下载不动,换浏览器,开 vpn 又奇迹般的飞快了。其他的用迅雷下载,很快就好了。全部放到 ~/.rncache/ 目录下。
需要注意的是文件名的问题。运行后发现 rncache 目录下出现 double-conversion-1.1.5.tar.gz 文件,卡在下载这个文件,其实是文件名错误,与之对应的下载文件是 v1.1.5.tar.gz,检查一下其他文件名,v2016.09.26.00.tar.gz 修改为 folly-2016.09.26.00.tar.gz,编译卡在哪个文件就是哪个文件名不对。再运行,编译大概2分钟,正常运行。界面加载了一会儿,出现欢迎界面。

开发环境

推荐使用 Sublime Text 3(免费,需要配置插件)或者 WebStorm(收费)。
官方推荐 Nuclide,据说很卡,参考 解决办法 ,反正挺折腾。

作者使用 Sublime Text 3 ,如何配置 React Native 开发环境参考 这篇文章
先安装 Package Control ,安装方法:https://packagecontrol.io/installation
View > Show Console 输入下面一大段代码 完成

import urllib.request,os,hashlib; h = '6f4c264a24d933ce70df5dedcf1dcaee' + 'ebe013ee18cced0ef93d5f746d80ef60'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

安装2个插件:

  • babel-sublime:支持 Javascript,ES6 和 JSX 语法高亮
  • react-native-snippets:支持 React Native 代码片段

安装方法:
Sublime Text -> Preferences -> Package Control
在 Package Control 对话框中输入 Package Control:Install Packages
在弹出的对话框中输入 Babel ,即可找到 babel-sublime ,点击安装。
安装后启用:打开任意文件,View -> Syntax -> Open all with current extension as… -> Bable -> JavaScript (Bable)

react-native-snippets 同样在 Package Control 中,Package Control:Install Packages ,在弹出的对话框中输入 react-native-snippets 安装。

验证:在文件中输入 rncc,有自动补足,即安装成功。
其他代码片段参见 插件介绍

真机运行

作者还没试过,参考 这篇文章 ,等作者踩坑了再补充。

参考资料

React-Native学习指南
https://reactnative.cn/docs/0.51/getting-started.html
http://wiki.jikexueyuan.com/project/react-native/getting-started.html
https://www.cnblogs.com/yexiaochai/p/6042112.html
https://www.jianshu.com/p/9b7c329da68a

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,185评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,445评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,684评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,564评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,681评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,874评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,025评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,761评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,217评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,545评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,694评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,351评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,988评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,778评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,007评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,427评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,580评论 2 349

推荐阅读更多精彩内容