React Native(Get Started)

背景

React Native(以后简称RN）是Facebook2015年4月开源的跨平台移动应用框架。口号是：Learn once，write anywhere. 主要使用JavaScript、React、ES6、JSX等语法，因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。

特性

优点

1.跨平台
2.热更新
3.代码复用
4.节省开发人力
4.……etc.

缺点

1.学习成本
2.安装包大
3.首次运行耗时
4.……ect.

说那些都没用，就问你要不要用吧

开始干吧

1.搭建环境

安装Homebrew

Homebrew是Mac下的系统安装包工具，相信很多iOS开发同学都已经装过这个了，装过的可以跳过此步。没有的使用下面代码就行
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
其中如果碰到读写权限问题可以修改权限之后重新安装
sudo chown -R`whoami`/usr/local

安装Node

使用Homebrew安装Node.js，安装最新版就完了
brew install node
使用过Cocoapods的同学都知道在安装完之后要修改下镜像地址的，至于为啥相信大家心里都有点B数的。同样Node也需要
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

安装Yarn、react-native-cli

Yarn是Facebook提供的替代npm的工具用来加速node下载。react-native-cli是RN的命令行工具，主要执行创建、初始化、更新、运行、打包等任务。
npm install -g yarn react-native-cli
当然大家都懂的
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

Xcode

这玩意相信大家都有安装了，有一点就是需要8.0及以上版本。大家可以去App Store下载安装最新版的使用。最好不要去其他三方地方下载，去年那一拨ghost相信大家也都知道。

---

到这里必须工具基本安装完了，足够进行开发了。但是本着简单省力的原则还是安装下面这些：

2.推荐安装

Watchman

Watchman是由Facebook提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能（packager可以快速捕捉文件的变化从而实现实时刷新）。
一句话就是：开发的时候，修改代码之后不用重新编译运行整个程序了，只需要cmd+R就可以马上刷新了。没错，就是有这种操作。
安装最新版watchman:
brew install watchman

Webstorm

Webstorm,装这个干嘛？当然是用来编写RN了！什么，用Xcode？额。。。你还可以用txt。
Webstorm是收费软件，大家可以支持正版，也可以***，恩恩。

3.测试项目

构建项目

我们需要利用命令来创建项目，并不是传统的利用XCode直接创建
首先命令进入到目标文件夹，我们假如工程放在首页
cd ~/Desktop
然后就可以执行RN命令了
react-native init RNProj 注：首次有可能会比较慢，还是耐心等吧，毕竟我们都得用到新版本。

react-native init RNProj

react-native init RNProj结果

这里RN项目就创建成功了，文件结构如下：

RN项目目录结构

运行项目

从上图react-native init RNProj结果中可以看到要运行对应的项目可以有两种方式：

• 命令运行
  cd /Users/xxx/Desktop/RNProj也就是cd到RN项目文件夹
  react-native run-ios 运行RN项目的iOS版本
• 直接到RN项目文件夹->iOS->xxx.xcodeproj，用XCode打开像传统的运行一样点击RUN按钮就可以
  首次运行会比较慢，可以通过命令行看到都进行了哪些操作
  运行成功后会另打开一个终端窗口来运行packager在8081端口，如下：
  
  

  packager window.png
  
  iOS模拟器会启动并运行，显示如下：
  
  

  首次运行RN-iOS.png

Hello World

选择自己稀罕的IDE打开index.ios.js文件：

index.ios.js内容截图.js内容截图

图中标注部分与模拟器上显示内容对应。那我们就在这个基础上对其进行修改。

• 首先我们需要为Hello World定制一个Style。在index.ios.js文件下部分的styles里面添加：

hello: {
  fontSize: 30,
  textAlign: 'center',
  margin: 20,
  marginBottom: 50,
  color: '#54FF54',
 },

• 然后我们在上面截图位置添加：

      Hello Wrold!

Hello World 修改

• 最后我们选择iOS模拟器，cmd + R bingo！模拟器就刷新啦，显示结果如下：
  
  

  Hello World 运行

惊不惊喜，刺不刺激，意不意外

注：我们可以在选择iOS模拟器时使用cmd + D来打开开发者界面进行Reload等操作

开发者界面

真机调试

除了在XCode中进行正常的Bundle identifier、Version、Provisioning Profile、Certificate等配置之外，需要以下操作：

• 设备必须通过USB连接电脑
• 设备和电脑处于同一WiFi网络
• XCode选择设备，点击运行按钮即可
  如果你需要在真机上启用调试功能，则需要打开RCTWebSocketExecutor.m文件(位置RNProj/node_modules/react-native/Libraries/WebSocket/RCTWebSocketExecutor.m)，然后将其中的"localhost"改为你的电脑的IP地址，最后启用开发者菜单中的"Debug JS Remotely"选项。

---

完事

到这里我们已经成功的创建了一个基于RN的工程，并实现了运行，修改。后续会继续跟进RN的持续开发。