React Native (0.57)开发环境搭建(过程记录)

搭建开发环境

一、安装依赖

必须安装的依赖有: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 应用。

猜你喜欢

转载自www.cnblogs.com/richard-youth/p/9718892.html