我的第一篇文章。初到此地,请大家多多关照。
不想看我 BB 的,跟着官网的 搭建开发环境 步骤走,基本不会有问题,注意选择指定的版本,推荐选择最新的当前版本
。
必须安装的软件
Homebrew,Node.js,Watchman,react-native-cli
Homebrew
- 是什么?
Mac 系统的包管理器,用于安装 Node,Watchman 等其他软件,并且可以统一管理。
下面的引用来自 https://www.cnblogs.com/lzrabbit/p/4032515.html 懒惰的肥兔 原创,版权归作者和博客园共有
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.net,ban.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
果然没有。怎么安装
- 官网 直接安装,下载 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
- 通过 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,所以需要花点时间。
运行
- 使用命令行工具运行。
cd AwesomeProject
react-native run-ios
- 使用 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