iOS端集成RN以及踩坑

2018-01-04

准备工作

搭建开发环境

安装Homebrew

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

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

安装Node

1
brew install node

安装Yarn、React Native的命令行工具

Yarn是Facebook提供的替代npm的工具,可以加速node模块的下载。
React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。

1
npm install -g yarn react-native-cli

安装Watchman

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

1
brew install watchman

安装Flow

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

1
brew install flow

安装cococapods:

1
sudo gem install cocoapods

原有项目集成RN

Cocoapods

在Podfile中添加如下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
rn_path = '../node_modules/react-native'

pod 'yoga', path: "#{rn_path}/ReactCommon/yoga/yoga.podspec"
pod 'React', path: rn_path, subspecs: [
'Core',
'RCTActionSheet',
'RCTAnimation',
'RCTGeolocation',
'RCTImage',
'RCTLinkingIOS',
'RCTNetwork',
'RCTSettings',
'RCTText',
'RCTVibration',
'RCTWebSocket',
'BatchedBridge'
]

新项目集成RN

使用react-native命令工具创建新工程

1
react-native init AwesomeProject

项目启动前的疑惑点

  1. 谁来做容器?

  2. Native跳转RN、RN跳转Native
    客户端作为容器

    • Native跳转RN,在初始化RctRootView时带入参数指定子页面
    • RN跳转Native,调用bridge中约定好的扩展方法
      RN作为容器
    • Native跳转RN,调用bridge中约定好的扩展方法
    • RN跳转Native,RN内部处理 或 调用bridge中约定好的扩展方法
  1. Native调用RN、RN调用Native
    Native调用RN

    • 初始化RCTRootView时,可以传参指定加载页面
    • 给RN发送广播通知
    • 扩展组件,组件中事件回调传参给RN

    RN调用Native

    • Native通过实现RCTBridgeModule添加扩展
  2. js.bundle包过大,加载速度慢,导致用户可见白屏问题,如何解决?
    分包加载解决,原理很简单:先加载重要的部分,后加载优先级低的部分

  3. Native和RN约定数据接口以什么方式输出
    以json格式通信

  4. Native提供哪些基础能力给到RN

    • open、close
    • fetch、upload、download(灵活,可设置header、cookies)
    • webview、JSSDK
    • 扩展组件,譬如:书架、选择相册、图片展示、保存图片
    • 各种广播通知,譬如:登录回调
    • 设备信息等
    • Debug工具
  5. 路由协议

    • 参考RESTful接口规范
    • 小写开头,驼峰写法,使用下杠_,不使用中杠-
  6. 热更新
    未做

踩过的坑

一、源
由于qiang,很多库都需要**才可以下载的到,所以国内的很多教程都是教大家切换源来解决不能下载的问题。
譬如切换npm源为淘宝镜像:

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

我遇到过boost库淘宝镜像不全的问题,导致RN无法正常编译。
解决办法:删除本地错误boost库,还原源重新下载。

二、RN缓存

当切换不同的RN项目后,由于RN有缓存,导致RN服务无法启动,用以下命令清除缓存:

1
2
3
yarn start --reset-cache
// OR
npm start -- -- reset-cache

三、谁做容器

客户端作为容器

  1. 多个RN(各自独立bridge)页面,开启Chrome Debug模式时,会因为端口被占用,导致红屏。
  2. 多个RN(共享bridge)页面,JS端错误导致页面同步,误以为由bridge生成出的RNView会同步显示。
  3. 多个RN页面会导致前端同学不好控制页面的状态切换。

RN作为容器

  1. window.rootViewController发生改变,更改为UINavigationController。书架View将作为标签的形式提供给前端使用,由于RN作为容器,容器环境不可知,所以将书架Controller单独放到一个新的UINavigationController中。这种UINavigationController嵌套在以往的开放中几乎没用过,存在一定的风险。
  2. 当RN页加载不出来时,即容器初始化失败时,整个APP都无法显示。