react-native之初识react-native

其实对react-native已经仰慕许久，但是由于工作太忙，加上自己的懒惰，迟迟没有着手学习，但是随着react-native日渐成熟，跨平台技术优势的显现，以及热更新成为必备技术，终于决定要对react-native一探究竟。

一：react-native开发环境配置

(1)react-native中文网地址：http://reactnative.cn

(2)react-native中文网文档(开发环境搭建)地址：http://reactnative.cn/docs/0.46/getting-started.html

(3)react-native中文网晴明老师的开发环境搭建视频教程：https://ke.qq.com/webcourse/index.html#course_id=197101&term_id=100233637&taid=1220865928921581&vid=a1417i5op7k

(4)现把react-native中文网开发环境搭建文档摘抄如下：

搭建开发环境

欢迎使用React Native！这篇文档会帮助你搭建基本的React Native开发环境。如果你已经搭好了环境，那么可以尝试一下编写Hello World。

根据你所使用的操作系统、针对的目标平台不同，具体步骤有所不同。如果想同时开发iOS和Android也没问题，你只需要先选一个平台开始，另一个平台的环境搭建只是稍有不同。

如果阅读完本文档后还碰到很多环境搭建的问题，我们建议你还可以再看看由本站提供的环境搭建视频教程(macOS iOS、macOS Android、windows Android)、windows环境搭建文字教程、以及常见问题。

目标平台：  iOS  Android  开发平台：  macOS  Linux  Windows

安装

必需的软件

Homebrew

Homebrew, Mac系统的包管理器，用于安装NodeJS和一些其他必需的工具软件。

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

译注：在Max OS X 10.11（El Capitan)版本中，homebrew在安装软件时可能会碰到/usr/local目录不可写的权限问题。可以使用下面的命令修复： 

sudo chown -R `whoami` /usr/local

Node

使用Homebrew来安装Node.js.

React Native目前需要NodeJS 5.0或更高版本。本文发布时Homebrew默认安装的是最新版本，一般都满足要求。 

brew install node

安装完node后建议设置npm镜像以加速后面的过程（或使用科学上网工具）。注意：不要使用cnpm！cnpm安装的模块路径比较奇怪，packager不能正常识别！

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

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

如果你看到EACCES: permission denied这样的权限报错，那么请参照上文的homebrew译注，修复/usr/local目录的所有权： 

sudo chown -R `whoami` /usr/local

安装完yarn之后就可以用yarn代替npm了，例如用yarn代替npm install命令，用yarn add 某第三方库名代替npm install --save 某第三方库名。

注意：目前npm5（发文时最新版本为5.0.4）存在安装新库时会删除其他库的问题，导致项目无法正常运行。请尽量使用yarn代替npm操作。

Xcode

React Native目前需要Xcode 8.0 或更高版本。你可以通过App Store或是到Apple开发者官网上下载。这一步骤会同时安装Xcode IDE和Xcode的命令行工具。

虽然一般来说命令行工具都是默认安装了，但你最好还是启动Xcode，并在Xcode | Preferences | Locations菜单中检查一下是否装有某个版本的Command Line Tools。Xcode的命令行工具中也包含一些必须的工具，比如git等。

推荐安装的工具

Watchman

Watchman是由Facebook提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能（packager可以快速捕捉文件的变化从而实现实时刷新）。

brew install watchman

Flow

Flow是一个静态的JS类型检查工具。译注：你在很多示例中看到的奇奇怪怪的冒号问号，以及方法参数中像类型一样的写法，都是属于这个flow工具的语法。这一语法并不属于ES标准，只是Facebook自家的代码规范。所以新手可以直接跳过（即不需要安装这一工具，也不建议去费力学习flow相关语法）。

brew install flow

Nuclide

Nuclide（此链接需要科学上网）是由Facebook提供的基于atom的集成开发环境，可用于编写、运行和 调试React Native应用。

点击这里阅读Nuclide的入门文档。

译注：我们更推荐使用WebStorm或Sublime Text来编写React Native应用。

测试安装

react-native init AwesomeProject
cd AwesomeProject
react-native run-ios

注意：init命令默认会创建最新的版本，而目前最新的0.45及以上版本需要下载boost库编译。此库体积庞大，在国内即便翻墙也很难下载成功，导致很多人无法正常运行iOS项目，推荐暂时使用0.44.3的版本。

提示：你可以使用--version参数（注意是两个杠）创建指定版本的项目。例如react-native init MyApp --version 0.44.3。注意版本号必须精确到两个小数点。

提示：如果run-ios无法正常运行，请使用Xcode运行来查看具体错误（run-ios的报错没有任何具体信息）。

你也可以在Nuclide中打开AwesomeProject文件夹 然后运行，或是双击ios/AwesomeProject.xcodeproj文件然后在Xcode中点击Run按钮。

修改项目

现在你已经成功运行了项目，我们可以开始尝试动手改一改了：

• 使用你喜欢的编辑器打开index.ios.js并随便改上几行。
• 在iOS Emulator中按下⌘-R就可以刷新APP并看到你的最新修改！

(5)按照react-native中文网的环境搭建文档，一顿操作之后，怀着无比激动的心情初始化自己的第一个传说中的Learn once, write anywhere、牛逼的、可以跨平台的、一份代码可以搞定iOS和安卓的react-native应用程序，应用名称为HelloWorld，在终端执行命令react-native init HelloWorld，终端一阵子执行之后如下图：

顿时喜出望外，这尼玛和文档上的创建项目结果一样啊，这不就意味着我的第一个react-native工程初始化成功了嘛！这么顺利？这尼玛有点小激动啊！废话不多说，赶紧按照终端提示把项目跑起来啊！执行cd /Users/fe/Desktop/工作资料/ReactNative/HelloWorld 进入项目文件夹后执行react-native run-ios先把项目运行到iOS终端看看是啥个样子，执行命令之后，终端便噼里啪啦执行了又一阵子，突然间终端不动了，我还以为项目跑起来了，一看模拟器，毛都没有一根啊，在仔细一看终端，尼玛项目报错了，如下：

这尼玛就尴尬了，项目的实体类不见了，真的是这样吗？于是怀着怀疑的心情，直接找到项目，使用Xcode打开、运行，结果...............如下图：

报错： error: 'boost/iterator/iterator_adaptor.hpp' file not found一看更懵逼，怎么找不到的类越来越多了呢？一阵摆弄之后，不见效果，于是谷歌、百度一番，这个坑还是有前辈跳过的，大概意思就是说本来配置环境时候需要下载c++的boost库，但是boost库在国外服务器，被天朝墙掉了，需要使用科学上网法自己下载，此时忍不住感叹一声：尼玛在天朝做个程序员，我容易吗？不容易啊！没办法，装吧，接着又是一阵谷歌百度装boost，鼓捣了老半天，硬是没有装上，有点泄气，接着谷歌、百度，就知道天无绝人之路，条条道路通罗马，看到了另一种解决办法，就是初始化项目时候指定react-native版本号，而且必须详细到两个小数点，找到了方法，话不多说，赶紧整，执行命令react-native init DeomAPP --version  0.44.3 于是终端又是一通执行，项目创建完毕，但是能不能打开呢，废话不多说赶紧试试，还是按照文档的项目执行命令，一顿执行之后，成了，如图

welcome to react native这次是真的成功了，有点小激动，同时你会发现桌面上还另外打开了一个终端如下图：

这个终端就是一个本地的小服务器，你修改了工程中的js代码后，就是通过这个小服务器处理，返回给移动端的。

(5)iOS端都已经跑起来了，那么趁热打铁，也把安卓端跑起来看看吧，我在这里使用androidstudio，如下图打开androidstudio选择我们DemoAPP的安卓项目

项目导入之后，选择一个模拟器跑起来，如下图：

至此，我们就算完整的搭建起来了第一个react-native应用。其实感觉还不错，react-native挺好玩。