React Native原理及坑点总结

一、React Native原理及流程介绍

（一）、RN前端调用native整体流程；

js调native简单流程：

js调native流程.png

js先根据moduleName和methodName，查询本地remoteModuleTable，remoteMethodTable，得出moduleIndex，methodIndex索引。再调用native暴露给js的nativeFlushQueueImmediate方法，执行调用native的逻辑。

详细调用流程.png

a、native端映射表数据结构

native端模块映射表数据结构.png

native在启动时，将初始化由RCT_EXPORT_MODULE指定的模块，并加载RCT_EXPORT_METHOD指定的方法到RCTNativeModule中，上图中module1、module2等都是RCTNativeModule类。并利用JavaScriptCore提供的JSContextRef传递remoteModuleTable,remoteMethodTable给到rn前端；

b、rn前端映射表数据结构

rn前端的remoteModuleTable数据：

remoteModuleT.png

rn前端的remoteMethodTable数据：

remoteMethodT.png

c、native与rn前端互调的例子

一个native调js，同时js又调用了native的例子：

js_native_js.png

（二）、native调用RN前端流程；

与前者流程不一致的是，js和Native之间并未协商一个通用的js module名及module对应的方法Table，React Native目前在native端是直接硬编码，写死通知rn前端的模块名及方法名，这要求开发者按照统一的写法规范及接口文档去调用js。

native调用js:

nativeToJs.png

底层仍然以JavaScriptCore作为中介，实现native对js的调用；

Value Object::callAsFunction(JSObjectRef thisObj, int nArgs, const JSValueRef args[]) const {
  JSValueRef exn;
  JSValueRef result = JSC_JSObjectCallAsFunction(m_context, m_obj, thisObj, nArgs, args, &exn);
  if (!result) {
    throw JSException(m_context, exn, "Exception calling object as function");
  }
  return Value(m_context, result);
}

（三）通讯原理总结；

  React Native主要依赖对JavaScriptCore的深度应用，来实现js对native的调用，通过暴露指定的类和接口来避免触范apple的上架规定，避免像JSPatch一样无限制的调用native代码。rn js层实现dom tree和render tree的构建，但是绘制交由了native层处理。

  实现方案具有创新性，但还不能完全满足大型业务的开发需求，要对原有框架作些改进和修复才能在项目中落地。较适合简单、有热更新需要、界面元素不太复杂的业务。希望以RN代替native开发还为时尚早，除非有机构或个人React Native对安卓和iOS提高兼容性，和React Native底层趋于稳定。

  但是线程之间切换存在开销，频繁通讯将导致业务流程复杂，需要通过callback来实现。同时线程切换，一般会有10-30毫秒的耗时，对于即时要求严格的场景，应尽量避免频繁需要js与native间的通讯；

二、充电桩RNBridge层、及RN前端实现介绍；

为了方便RN业务顺利开展，有必要对app原有功能进行封装，如"网络、数据库、蓝牙、动画"等，React Native原生支持不太好或不够完善的部分，进行补充或修复。

RNBridge层次结构.png

RN前端项目结构图：

RN前端结构.png

项目中主要是针对RN的动画实现机制有做一些修改，RN的动画是依赖于js线程和主线程间的通讯，但是js线程切换到主线程的时间不是一致的，时快时慢，这样会导致主线程更新动画的帧间隔不一致，如果js线程卡顿，那么主线程的动画也相应卡顿。

针对以上问题，想到了用native的方式实现动画，依赖于js端传来的表达式，声明『动画类型、动画时长、时间循环次数』等，RN前端只是给native发送了动画指令及参数，动画过程完全由native操作。从而最大限度实现较好的性能。

三、安卓效果演示及简单介绍；

四、开发过程遇到的问题及坑点；

RN遇到的坑点.png

相关的经验总结备忘：

安卓经验总结：
a.用react-native run-android时，提示local.properties，的ndk目录、sdk目录未设置，打开设置；

b.不能下载https://jcenter.bintray.com/com/google/auto/value/auto-value/1.5.2/auto-value-1.5.2.jar，可以将ss代理设置成全局代理。或者不走shadowsocks客户端，直接由as配置ip、port、password、帐户。

c.默认rn demo加载的是本地assets的bundle，则输入以下命令：
1）mkdir android/app/src/main/assets
2）react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

d.摇晃vivo，输入ip:port，之后，要重启npm服务，才可以在线打bundle包；

e.提示在本地ip的环境下，加载locolhost的请求，被跨域拦截，安装chrome跨域工具；

f.cd Awesome
react-native run-android
i.compile project(':android-jsc')
compile 'org.webkit:android-jsc:r174650'

g.单例莫名被析构，原因是当前rn js代码有问题，会强制析构ReactActivity及相关联的单例类。原因未知。

开发过程中常见的问题总结：
a.Super expression must either be null or a function, not undefined
component的首字母没有为大写

b.https://github.com/facebook/react-native/issues/14314
Packager can not find entry file index.ios.js in any of the roots... #14314
watchman watch-del-all
rm -rf node_modules && npm install
npm start -- --reset-cache

c.no bundle url
一般是shadowsocks开了全局代理导致。

d.Unable to resolve module `AccessibilityInfo`
重启电脑，并且npm start --reset-cache

e.Error: Cannot find module '/Users/liuyihao/beehome/node_modules/react-native/local-cli/cli.js'
    at Function.Module._resolveFilename (module.js:485:15)
    at Function.Module._load (module.js:437:25)
    at Function.Module.runMain (module.js:605:10)
    at startup (bootstrap_node.js:158:16)
    at bootstrap_node.js:575:3
npm ERR! code ELIFECYCLE
npm ERR! errno 1
提示npm ERR! code ELIFECYCLE
rm -rf node_modules && rm ./package-lock.json && npm install

f.
如果出现修改了的代码不生效，或者出现"Module `*` does not exist in the Haste module map"、<br>"Unable to resolve module `AccessibilityInfo`",可以尝试重启清除npm缓存；
Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`.

h.
render方法的括号一定要在return后面，不可以换行，否则将crash.
return ()