關(guān)于React-native,iOS原生組件封裝以及導(dǎo)出

最近公司項目需求,需要封裝一些關(guān)于iOS原生的組件提供給RN調(diào)用,在本文中做一些總結(jié)。希望能幫助到大家!


關(guān)于組件的封裝步驟

1.創(chuàng)建一個類,并且遵守RCTBridgeModule協(xié)議。
2.準守RCTBridgeModule必須引入RN的兩個頭文件#import<React/RCTBridgeModule.h>#import <React/RCTLog.h>
3.為了實現(xiàn)RCTBridgeModule協(xié)議,你的類需要包含RCT_EXPORT_MODULE();宏。這個宏也可以添加一個參數(shù)用來指定在Javascript中訪問這個模塊的名字。
4.提供給RN調(diào)用的方法:RCT_EXPORT_METHOD(方法名稱:(類型)參數(shù)名) {實現(xiàn)方法}
5.帶有回調(diào)參數(shù)的方法實現(xiàn):RCT_EXPORT_METHOD(方法名:(RCTResponseSenderBlock)callback) {callback(@[返回值]);}這個方法RCTResponseSenderBlockRN接收回調(diào)的方法。
6.該方法提供屬性給RN調(diào)用:RCT_EXPORT_VIEW_PROPERTY(屬性名, 類型)。
7.如果你的項目中有一些常量的屬性需要開始的時候返回給RN使用可以實現(xiàn)該方法- (NSDictionary *)constantsToExport{return @{ @"ValueOne": @"返回的常量" };}實現(xiàn)該方法RN那邊會把你返回的字典保存起來,以便以后調(diào)用,具體實現(xiàn)流程不清楚如果有大神知道可以告訴我一下,在此謝過。

以上是封裝組件原生需要實現(xiàn)的方法。


RN調(diào)用原生組件步驟

//使用NativeModules可以訪問我們準守RCTBridgeModule的原生類
import { NativeModules } from 'react-native';
//獲取原生封裝的類
var manager = NativeModules.你的原生類名;
//使用對象調(diào)用方法
manager.方法名(參數(shù));

以上是RN調(diào)用原生代碼


當我們封裝好的iOS組件要如何導(dǎo)出到RN的文件夾,不依賴于iOS項目?

1.首先我們要創(chuàng)建一個靜態(tài)庫
2.打開我們的靜態(tài)庫,保存到你的RN項目里要保存的文件夾里。
3.靜態(tài)庫配置


配置.png

在該設(shè)置中添加值為$(SRCROOT)/../../react-native/React,并設(shè)置為recursive。
4.設(shè)置完成后打開iOS項目文件


配置.png

添加完成后需要把我們的靜態(tài)庫導(dǎo)入iOS項目中
配置.png

添加完成后,我們的項目就可以使用我們導(dǎo)出的iOS原生組件了。
該文章只是對在工作中遇到的問題的一些總結(jié)分享,希望能幫助到有類似需求的小伙伴。如果有問題請指出。謝謝~~!
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容