iOS开发-给ReactNative提供原生UI组件时找不到桥接方法的问题

发表于

最近做的项目里有跟React Native（以下简称RN）共同开发的部分，因为有些功能RN不是很好实现，所以这些任务就落到了Native（原生）的肩上。

因为之前对RN接触较少，有很多东西都不太了解，以后会多学习RN相关的知识，这里先对昨天遇到的一个坑做一个记录。其实也不算是一个坑，算作是我自己没有仔细看文档导致的问题。

好了，废话不多说，我们先看一下是什么问题。

场景

当RN中需要调用Native原生的UI控件时，我们通常需要提供一个接口，具体的使用方法可以看官方文档，如果不喜欢看英文文档也可以去看中文文档。

可以看到原生这边需要做的事情大致分为这么几步：

  • 1.创建一个基于RCTViewManager的子类；
  • 2.添加RCT_EXPORT_MODULE();作为桥接文件；
  • 3.实现- (UIView *)view方法返回RN需要的UI样式；

最多就算你需要传入参数或者回调，也只需要：

1
2
RCT_EXPORT_VIEW_PROPERTY(data, NSString);
RCT_EXPORT_VIEW_PROPERTY(onCallBack, RCTBubblingEventBlock);

乍看一下其实很简单，其实写起来也很简单。

RN部分也只需要很简单的代码就可以将这个原生的UI控件引入进来：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 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，无论怎么修改位置大小都显示不出来。

填坑

最后我们改变了桥接文件：

将

1
RCT_EXPORT_MODULE();

改为

RCT_EXPORT_MODULE(xxx);

发现可以实现，但是人家官方的例子是没有这个指向的哇，这时候仔细看文档时发现了这样的一句话…

logo

所以我们的名字应该是xxxManager，然后告诉RN的应该是xxx。

好吧，就这样解决了问题。

一切都是因为没有仔细看文档，所以。。。同学们还是仔细看文档吧！太丢人了。。。

溜了溜了。。。。

回头喊一句。。难道我真的只是一个人么？