随着近几年web前端的火热，纯原生的开发需求逐渐减少，混合开发也变得越来越流行。连最近刷论坛也传着不会前端的android开发不是好的开发者这么一句话。上一个项目快要结束，最近也闲下来了，带着对前端的好奇和提升自身技术的想法，入了混合开发的坑。react-native是Facebook打造的一款开源的跨平台移动应用开发框架，作为最火的跨平台移动应用开发开发框架，官网上写着Learn once, write anywhere，吸引了大批开发者。它弥补了web app性能上的缺陷，调用原生组件，利用javascript开发，支持热更新，跨平台的特性也降低了开发成本。但是目前存在少量bug，我在入门学习的时候也遇到了不少坑，下面做简要记录。

xcode编译时报错

1.’boost/xxx/xxx.hpp’ file not found

由于 /Users/Vanessa/.rncache 中 boost_1_63_0.tar.gz， double-conversion-1.1.5.tar.gz， folly-2016.09.26.00.tar.gz， glog-0.3.4.tar.gz 文件下载不完整

导致 node_modules/react-native/third-party 文件不完整

解决方案：

删除 .rncache 后手动下载一份，后放入 .rncache 中

把以上文件解压后放入 node_modules/react-native/third-party 下

Clean & Build

2.”config.h” file not found
解决方案：
项目目录下执行npm install

之前在网上查到要在package.json中改react-native的版本号，我这边改了反倒报错

android studio报错

编译报错

1.unable to load script form assets

解决方案：

在 android/app/src/main 目录下创建一个 assets空文件夹

在跟目录下执行

react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/

点击菜单刷新报错

红屏显示Could not connect to development server

解决方案：

react-native start

在公司的windows上配置环境，android平台始终报这个错，各种方案都试过了

最后的解决方案是：

在android设备的菜单中选择最后一个选项，配置编译机器的ip地址和端口号8081。

注意：6.0以上的模拟器不要忘记连上wifi

###记2017.12.20爬坑

当你的app有多张图片时，如果你发现在android机上某些图片显示不出，不管是嵌套在需要loadmore的listview,还是性能更高的升级版flatlist以及scrollview，这种类似图片长列表加载到固定页数，后面偶尔只能显示出一两张这种问题，是由于内存问题导致的，最简单的解决办法，分配更大的堆内存，在Android的AndroidManifest配置文件中开启largeHeap，在application标签下添加android:largeHeap="true"即可，整个过程没有任何警告和错误，真的是太坑了。

记2018.1.18爬坑

react-native Android真机调试技巧：

目前网上这块的资料比较少，基本都是如官网所说摇一摇或者是通过adb命令发送一个双击R的输入事件

然而这并不实用，真机调试的时候经常都是连着数据线，每次reload都要摇一摇触发难度系数比较高，输入adb命令显得过于麻烦。实际上我们使用reactnative绘制的activity都是继承了ReactActivity，查看一下源码，它重写了按键监听，我们可以看到这样的代码

@Override
public boolean onKeyUp(int keyCode, KeyEvent event) {
  return mDelegate.onKeyUp(keyCode, event) || super.onKeyUp(keyCode, event);
}

我们点击进去mDelegate.onKeyUp(keyCode, event)继续跟踪，可以看到

public boolean onKeyUp(int keyCode, KeyEvent event) {
  if (getReactNativeHost().hasInstance() && getReactNativeHost().getUseDeveloperSupport()) {
    if (keyCode == KeyEvent.KEYCODE_MENU) {
      getReactNativeHost().getReactInstanceManager().showDevOptionsDialog();
      return true;
    }
    boolean didDoubleTapR = Assertions.assertNotNull(mDoubleTapReloadRecognizer)
      .didDoubleTapR(keyCode, getPlainActivity().getCurrentFocus());
    if (didDoubleTapR) {
      getReactNativeHost().getReactInstanceManager().getDevSupportManager().handleReloadJS();
      return true;
    }
  }
  return false;
}

所以我们点菜单键调用的是getReactNativeHost().getReactInstanceManager().showDevOptionsDialog();弹出调试菜单。

我们双击R键，调用的是getReactNativeHost().getReactInstanceManager().getDevSupportManager().handleReloadJS();进行reload刷新。

这两个方法在ReactActivity直接调用，纯react-native搭建的项目，我们可以在onCreate时调用方便调试。

如果是在混合开发的项目，onCreate方法中我们有自己的ReactInstanceManager，可以直接调用 mReactInstanceManager.getDevSupportManager().handleReloadJS();菜单弹出也一样。

记2018.8.28爬坑

当前最新的react-native版本0.56.0引入mobx报错
网上诸多教程为老版本引入方式，过程如下：
npm安装以下插件

1	npm i babel-plugin-transform-decorators-legacy babel-preset-react-native-stage-0 --save-dev

修改 .babelrc 文件配置 babel 插件

{
 'presets': ['react-native'],
 'plugins': ['transform-decorators-legacy']
}

这个方式已经过时了，你会得到以下错误，看起来是babel的问题：

1	error: bundling failed: TypeError: Property right of AssignmentExpression expected node to be of a type ["Expression"] but instead got null

google无数次后在github上issue查到babel@7.0+不能再使用原先的babel-plugin-transform-decorators-legacy，这个只能在babel@6以下使用，而新版本rn使用正好使用的是babel@7.0+
正确的.babelrc如下：

{
  "presets": ["react-native"],
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }]
  ]
}

注意，这里的plugin-proposal-decorators的版本必须与babel的版本完全一样，
在yarn.lock文件中可以查看babel的版本如下：

"@babel/core@7.0.0-beta.47":
  version "7.0.0-beta.47"
  resolved "http://r.cnpmjs.org/@babel/core/download/@babel/core-7.0.0-beta.47.tgz#b9c164fb9a1e1083f067c236a9da1d7a7d759271"
  dependencies:
    "@babel/code-frame" "7.0.0-beta.47"
    "@babel/generator" "7.0.0-beta.47"
    "@babel/helpers" "7.0.0-beta.47"
    "@babel/template" "7.0.0-beta.47"
    "@babel/traverse" "7.0.0-beta.47"
    "@babel/types" "7.0.0-beta.47"

如果你的版本是@7.0.0-beta.47那么用如下命令安装
yarn add @babel/plugin-proposal-decorators@7.0.0-beta.47