最近做的项目里有跟React Native（以下简称RN）共同开发的部分，因为有些功能RN不是很好实现，所以这些任务就落到了Native（原生）的肩上。
因为之前对RN接触较少，有很多东西都不太了解，以后会多学习RN相关的知识，这里先对昨天遇到的一个坑做一个记录。其实也不算是一个坑，算作是我自己没有仔细看文档导致的问题。
好了，废话不多说，我们先看一下是什么问题。
场景
当RN中需要调用Native原生的UI控件时，我们通常需要提供一个接口，具体的使用方法可以看官方文档，如果不喜欢看英文文档也可以去看中文文档。
可以看到原生这边需要做的事情大致分为这么几步：
1.创建一个基于
RCTViewManager的子类；2.添加
RCT_EXPORT_MODULE();作为桥接文件；3.实现
- (UIView *)view方法返回RN需要的UI样式；
最多就算你需要传入参数或者回调，也只需要：
RCT_EXPORT_VIEW_PROPERTY(data, NSString);
RCT_EXPORT_VIEW_PROPERTY(onCallBack, RCTBubblingEventBlock);
乍看一下其实很简单，其实写起来也很简单。
RN部分也只需要很简单的代码就可以将这个原生的UI控件引入进来：
// MapView.js
import { requireNativeComponent } from 'react-native';
// requireNativeComponent automatically resolves 'RNTMap' to 'RNTMapManager'
module.exports = requireNativeComponent('RNTMap', null);
// MyApp.js
import MapView from './MapView.js';
...
render() {
return <MapView style={{ flex: 1 }} />;
}
坑
于是我兴致勃勃的创建了一个文件xxx.m + xxx.h。
然后跟RN的小伙伴报告了我的文件名，然后愉快的调试了起来。
。
。
。
可是撸完代码之后发现RN这边根本没有显示原生的UI，无论怎么修改位置大小都显示不出来。
填坑
最后我们改变了桥接文件：
将
RCT_EXPORT_MODULE();
改为
RCT_EXPORT_MODULE(xxx);
发现可以实现，但是人家官方的例子是没有这个指向的哇，这时候仔细看文档时发现了这样的一句话...
example.png
所以我们的名字应该是xxxManager，然后告诉RN的应该是xxx。
好吧，就这样解决了问题。
一切都是因为没有仔细看文档，所以。。。同学们还是仔细看文档吧！太丢人了。。。
溜了溜了。。。。
回头喊一句。。难道我真的只是一个人么？
