免费开源的iOS开发学习平台

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。

  1. 下载Atom安装文件,可以访问Atom官网下载链接https://atom.io/download/mac。
  2. 双击下载得到的Atom安装文件,可以得到Atom.app,移动到应用程序目录。
  3. 打开Atom,选择【Atom】->【Preferences】。
  4. 在Settings选择【Install】。
  5. 在搜索框中输入“Nuclide”按回车开始搜索。
  6. 点击安装Nuclide包。

安装成功后,可以显示如下提示界面。

测试开发环境

安装完上述几个软件后,我们就可以通过react-native命令来创建一个测试项目,并运行看看效果。

  • 首先通过react-native命令行工具创建了一个AwesomeProject项目。
react-native init AwesomeProject

  • 进入AwesomeProject工程目录。
cd AwesomeProject
  • 执行如下命令来运行程序,此时iOS模拟器会自动启动。
react-native run-ios

如果看到iOS模拟器显示如下界面就要恭喜你了,它表示已经成功地搭建的React Native的开发环境,接下来将正式开始我们的React Native之旅。