搭建开发环境
一、安装依赖
必须安装的依赖有:Node、Watchman 和 React Native 命令行工具以及 Xcode。
1、首先安装 Homebrew
2、安装 Node, Watchman
brew install node
补充:Node.js
是一个用Chrome's V8 JavaScript engine
构建的 JavaScript 运行时框架。Node.js
使用事件驱动、非阻塞式 I/O 模块使得它非常的轻量级和非常的高效。Node.js的
生态系统 npm 是世界上最大的开源库生态系统。 npm的全称是Node Package Manager,是Nodejs的包管理器。Node.js本身提供了基本的模块,但是我们利用这些基本模块开发实际应用需要编写大量的代码,做较多的工作。npm上已经有很多Node.js库或框架,这些库或框架可以帮助Node.js的开发者用较少的代码完成较复杂的应用。除了使用Homebrew来安装 Node外,我们可以从首先从官网下载Node.js 。然后一步一步安装即可,最后安装成功后,可以看到Node.js 和npm 都已经安装成功了,并且安装在/usr/local/bin目录下。
下载地址:Node.js 官网
如果你已经安装了 Node,请检查其版本是否在 v8.3 以上。如下:
node -v
v8.8.1
如果你已经安装了 npm,也可以先检查下版本号
npm -v
5.5.1
安装完 Node 后(上面brew也一并安装了npm)建议设置 npm 镜像以加速后面的过程(或使用科学上网工具)。
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
注意:不要使用 cnpm!cnpm 安装的模块路径比较奇怪,packager 不能正常识别!
brew install watchman
Watchman则是由 Facebook 提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能(packager 可以快速捕捉文件的变化从而实现实时刷新)。
3、Yarn、React Native 的命令行工具(react-native-cli)
Yarn是 Facebook 提供的替代 npm 的工具,可以加速 node 模块的下载。React Native 的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。
npm install -g yarn react-native-cli
安装完 yarn 后同理也要设置镜像源:
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
安装完 yarn 之后就可以用 yarn 代替 npm 了,例如用yarn
代替npm install
命令,用yarn add 某第三方库名
代替npm install 某第三方库名
。
4、Xcode
React Native 目前需要Xcode 9.4 或更高版本。你可以通过 App Store 或是到Apple 开发者官网上下载。这一步骤会同时安装 Xcode IDE、Xcode 的命令行工具和 iOS 模拟器。
Xcode 的命令行工具
启动 Xcode,并在Xcode | Preferences | Locations
菜单中检查一下是否装有某个版本的Command Line Tools
。Xcode 的命令行工具中包含一些必须的工具,比如git
等。
二、创建新项目
使用 React Native 命令行工具来创建一个名为"yooweiProject"的新项目:
!!!注意!!!:init 命令默认会创建最新的版本,而目前最新的 0.45 及以上版本需要下载 boost 等几个第三方库编译。这些库在国内即便FQ也很难下载成功,导致很多人无法运行iOS项目
!!!中文网在论坛中提供了这些库的国内下载链接。如果你嫌麻烦,又没有对新版本的需求,那么可以暂时创建0.44.3
的版本。
react-native init yooweiProject
提示:你可以使用--version
参数(注意是两
个杠)创建指定版本的项目。例如react-native init MyApp --version 0.44.3
。注意版本号必须精确到两个小数点。
如果你是想把 React Native 集成到现有的原生项目中,则步骤完全不同,请参考集成到现有原生应用。
三、编译并运行 React Native 应用
在你的项目目录中运行react-native run-ios
:
cd yooweiProject
react-native run-ios
提示:如果 run-ios 无法正常运行,请使用 Xcode 运行来查看具体错误(run-ios 的报错没有任何具体信息)。
react-native run-ios
只是运行应用的方式之一。你也可以在 Xcode 中直接运行应用。如果你无法正常运行,先回头仔细对照文档检查
,然后可以看看论坛的求助专区。
在真机上运行
上面的命令会自动在 iOS 模拟器上运行应用,如果你想在真机上运行,则请阅读在设备上运行这篇文档。
修改项目
现在你已经成功运行了项目,我们可以开始尝试动手改一改了:
- 使用你喜欢的编辑器打开
App.js
并随便改上几行。 - 在 iOS 模拟器中按下
⌘-R
就可以刷新 APP 并看到你的最新修改!(如果没有反应,请检查模拟器的 Hardware 菜单中,connect hardware keyboard 选项是否选中开启)
完成了!
恭喜!你已经成功运行并修改了你的第一个 React Native 应用。