ios 橋接檔案找不到檔案_iOS開發-給ReactNative提供原生UI元件時找不到橋接方法的問題...

最近做的項目裡有跟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 ;

}

坑

于是我興緻勃勃的建立了一個檔案xxx.m + xxx.h。

然後跟RN的小夥伴報告了我的檔案名，然後愉快的調試了起來。

。

。

。

可是撸完代碼之後發現RN這邊根本沒有顯示原生的UI，無論怎麼修改位置大小都顯示不出來。

填坑

最後我們改變了橋接檔案：

将

RCT_EXPORT_MODULE();

改為

RCT_EXPORT_MODULE(xxx);

發現可以實作，但是人家官方的例子是沒有這個指向的哇，這時候仔細看文檔時發現了這樣的一句話...

example.png

是以我們的名字應該是xxxManager，然後告訴RN的應該是xxx。

好吧，就這樣解決了問題。

一切都是因為沒有仔細看文檔，是以。。。同學們還是仔細看文檔吧！太丢人了。。。

溜了溜了。。。。

回頭喊一句。。難道我真的隻是一個人麼？