爽爆天ReactNative基础篇 - 配置开发环境

ReactNative官网上也有教你配置开发环境,但是FB的友仔似乎忙于搞大事,里面的文档更新总是慢半拍,以置于照着他做有可能会误入歧途。

这里将开发中要安装的工具与要配置的环境收罗一下,并加些小解释,让环境配置不再成为你的梦魇,一个字—爽!!

如果你照着做顺利地安装完了所有环境,请不要忘了对着天空大喊一声 — 爽!!!

首先,本系列教程都是基于apple Mac OS X 系统。

如果你用Windows,强烈建议你换台电脑,不要问我为什么~当然,你也可以选择装个黑苹果。记得百度有个老同事,跟我说用黑苹果楞是开发了大半年,好像还有阿里的友仔也用着黑苹果搞。—- 对此我只能说,公司不能太抠!!好吧,领导们才不来看我写的东西呢。。

总而言之,如果你想照着本系列文章搞起,还是先换台Mac吧:)

官网链接先奉上:)

1 无脑直敲

所有命令一股脑奉上为了避免懒惰,本节放在文章最后

2 基础环境配置

2.1 安装Homebrew

Homebrew 是 mac上安装软件包的工具,为什么要用她来安装软件?因为她会把软件相关的依赖库一股脑帮你装完!!用他来安装 RN 环境再好不过了。

  • 安装Homebrew工具(这个命令如果过时,建议直接上google找官方下载命令试下)

Homebrew的安装非常简单,打开终端复制、粘贴以下命令,回车,搞定(请放心使用,原汁原味的官方安装方法搬运)

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

*brew常用命令

几个brew常用命令:

    搜索软件:brew search 软件名,如brew search wget
    安装软件:brew install 软件名,如brew install wget
    卸载软件:brew remove 软件名,如brew remove wget
    brew -v 查看当前 Homebrew版本
    brew update # 升级brew 确保 brew是最新版本

*cakebrew

有个可视化的基于brew的包管理工具, cakebrew,360度旋转推荐!!!~

如果你用brew用着有啥不爽时,打开此app,左下角有个doctory,这个医生会把brew遇到的所有问题及解决方案告诉你,你一个个解决了,直到运行 run doctor不再有出错信息为止。

这里仅仅领你进门,再深层次的应用,与遇到问题的解决,还是靠自己多多上网与人交流或是用google百度一下。

2.2 安装 Node.js

NodeJS GitHub 首页

Node.js是本地JavaScript解析运行时,要搞起Reactnative必装此工具(就像写C程序必先装GCC一样)。这个你要学好React Native的话,还是得抽空学习之,也可以说是要掌握好RN必备的知识吧。

npm是Node.js下的包管理工具。就像之前介绍过的 brew一样,是用于管理Node.js下的JS程序的。

1
2
3
brew install node
安装成功后
brew link node (配置入环境PATH,使之在命令行可直接运行)

我们后面会对Node.js有详细的介绍~先留个空子!
[空子]

2.3 安装 watchman 和 flow

这两个包分别是监控文件变化和类型检查的。

watchman: 服务器监控到JS文件变化后自动重新部署。
flow : JavaScript 静态类型检查器.

安装如下:

brew install watchman
brew install flow

2.4 安装 React-Native

通过 npm安装即可:

  npm install -g react-native-cli

至此,你可以在命令行使用 react-native 工具直接执行RN的命令了,如:

进入项目目录

$ react-native init MyFirstProject

上面命令将初始化一个名为 MyFirstProject 的 ReactNative工程,包括iOS与Android项。

3 iOS开发环境配置

3.1 安装 Xcode

打开 appstore 查找 Xcode,直接装之。

3.2 安装 CocoaPods

1
2
gem install cocoapods --pre
pod setup

gem如果一直不动,试下网上搜之换个淘宝源。这个过程巨慢无比,一直吐槽cocoapods这种把所有依赖库信息拉到本地的做法~

执行 pod --version 出现版本信息表示成功

4 Android开发环境配置

4.1 下载安装 Android Studio

到官网下之 下之

然后就是配置JDK,SDK啥的,但是这些你安装了 AS 之后,AS会有提示告诉你怎么搞最新的,所以这里也不累赘了~实在不行自行上Google去百度一下。

Android环境搭起来也是坑,这里感谢下牛X立体的长城巨墙。

到此为止,要装的都装好啦~差不多要费你半天功夫 :P

5 最后来个无脑直敲

不用多想,下面命令一个一个敲汁!!一个个运行之!!

5.1 Homebrew

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

执行 brew -v 出现版本信息表示成功

5.2 安装Node.js

1
2
3
brew install node
安装成功后
brew link node (配置入环境PATH,使之在命令行可直接运行)

执行 node --version , npm --version出现版本信息表示成功

5.3 安装 watchman 和 flow

1
2
brew install watchman
brew install flow

5.4 安装 React-Native

通过 npm安装即可:

  npm install -g react-native-cli

5.5 安装 CocoaPods

1
2
gem install cocoapods --pre
pod setup

执行 pod --version 出现版本信息表示成功