React Native基础:1-搭建React Native开发环境
React Native使你能够在Javascript和React的基础上获得完全一致的开发体验,构建世界一流的原生APP。React Native着力于提高多平台开发的开发效率 —— 仅需学习一次,即可编写任何平台的APP应用。React Native由Facebook创立,Facebook已经在多项产品中使用了React Native,并且将持续地投入建设React Native。本节会帮助你搭建基本的React Native开发环境。
在搭建React Native开发环境之前,我们需要提前在Mac电脑上预装几个工具软件,这几个软件都是Mac平台下开发React Native所必须的。
Homebrew
Homebrew是Mac OS X系统的包管理器,用于安装Node.js和一些其他必需的工具软件,号称Mac系统下不可或缺的套件管理器,用来安装套件十分方便。
Homebrew的安装十分方便,将下面脚本拷贝到终端里面,执行完毕之后安装完成了。
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
安装完成后,我们可以执行如下命令查看是否安装成功,该命令执行成功后,可以查看Homebrew的版本号。
brew --version
如果我们之前已经安装过Homebrew,也可以执行如下命令升级Homebrew的版本。
brew update
Node.js
接下来我们需要安装JavaScript的运行环境。在终端中执行如下命令安装Node.js,运行结果如下所示。
brew install node
Node.js安装完成后,可以尝试把NPM的安装源替换成国内的地址,这样可以提高React Native依赖组件的下载速度。NPM是随同Node.js一起安装的包管理工具。
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
Node.js安装完成后,可以执行如下命令查看Node.js版本。需要确认Node.js的版本高于4.0,如果低于4.0,则需要手工升级Node.js版本。
node -v
执行如下命令升级Node.js版本。
npm install -g n
sudo n stable
React Native的命令行工具(react-native-cli)
React Native的命令行工具--react-native-cli,可以用于执行创建、初始化、更新项目、运行打包服务(packager)等任务,可以通过NPM来安装React Native的命令行工具,安装成功后可以看到如下提示。命令中"-g"参数表示安装的命令行工具应用到全局环境,可以在任何目录都能执行react-native命令。
npm install -g react-native-cli
Xcode
Xcode是苹果公司向开发人员提供的集成开发环境(IDE),用于开发MacOS,iOS,iWatch, AppleTV的应用程序。Xcode只能运行在苹果公司的Mac操作系统上运行。React Native目前需要Xcode 7.0 或更高版本,可以通过App Store或是到Apple开发者官网上下载。
Flow
Flow是Facebook推出的一款开源JavaScript静态类型检查器, 旨在发现JavaScript程序中的类型错误, 以提高程序员的效率和代码质量。我们可以通过brew来安装Flow,安装成功后可以看到如下提示。
brew install flow
开发IDE--Nuclide
集成开发环境(IDE,Integrated Development Environment )是用于提供程序开发环境的应用程序,一般包括代码编辑器、编译器、调试器和图形用户界面等工具。一般来说一个好的IDE能极大的提高我们的开发效率。Facebook官方推荐Nuclide(https://nuclide.io)作为开发React Native的IDE。
Nuclide是由Facebook提供的一款基于Atom的开源集成开发环境(IDE),可用于编写、运行和调试React Native应用,该项目的官方地址为:https://github.com/facebook/nuclide。Nuclide同时支持MAC OS X和Linux平台。我们按照下面的步骤安装Nuclide。
- 下载Atom安装文件,可以访问Atom官网下载链接https://atom.io/download/mac。
- 双击下载得到的Atom安装文件,可以得到Atom.app,移动到应用程序目录。
- 打开Atom,选择【Atom】->【Preferences】。
- 在Settings选择【Install】。
- 在搜索框中输入“Nuclide”按回车开始搜索。
- 点击安装Nuclide包。
安装成功后,可以显示如下提示界面。
测试开发环境
安装完上述几个软件后,我们就可以通过react-native命令来创建一个测试项目,并运行看看效果。
- 首先通过react-native命令行工具创建了一个AwesomeProject项目。
react-native init AwesomeProject
- 进入AwesomeProject工程目录。
cd AwesomeProject
- 执行如下命令来运行程序,此时iOS模拟器会自动启动。
react-native run-ios
如果看到iOS模拟器显示如下界面就要恭喜你了,它表示已经成功地搭建的React Native的开发环境,接下来将正式开始我们的React Native之旅。