最近公司項(xiàng)目需求,需要封裝一些關(guān)于iOS原生的組件提供給RN調(diào)用,在本文中做一些總結(jié)。希望能幫助到大家!
關(guān)于組件的封裝步驟
1.創(chuàng)建一個(gè)類,并且遵守RCTBridgeModule
協(xié)議。
2.準(zhǔn)守RCTBridgeModule
必須引入RN的兩個(gè)頭文件#import<React/RCTBridgeModule.h>
和#import <React/RCTLog.h>
3.為了實(shí)現(xiàn)RCTBridgeModule
協(xié)議,你的類需要包含RCT_EXPORT_MODULE();
宏。這個(gè)宏也可以添加一個(gè)參數(shù)用來(lái)指定在Javascript中訪問(wèn)這個(gè)模塊的名字。
4.提供給RN調(diào)用的方法:RCT_EXPORT_METHOD(方法名稱:(類型)參數(shù)名) {實(shí)現(xiàn)方法}
5.帶有回調(diào)參數(shù)的方法實(shí)現(xiàn):RCT_EXPORT_METHOD(方法名:(RCTResponseSenderBlock)callback) {callback(@[返回值]);}
這個(gè)方法RCTResponseSenderBlock
RN接收回調(diào)的方法。
6.該方法提供屬性給RN調(diào)用:RCT_EXPORT_VIEW_PROPERTY(屬性名, 類型)
。
7.如果你的項(xiàng)目中有一些常量的屬性需要開(kāi)始的時(shí)候返回給RN使用可以實(shí)現(xiàn)該方法- (NSDictionary *)constantsToExport{return @{ @"ValueOne": @"返回的常量" };}
實(shí)現(xiàn)該方法RN那邊會(huì)把你返回的字典保存起來(lái),以便以后調(diào)用,具體實(shí)現(xiàn)流程不清楚如果有大神知道可以告訴我一下,在此謝過(guò)。
以上是封裝組件原生需要實(shí)現(xiàn)的方法。
RN調(diào)用原生組件步驟
//使用NativeModules可以訪問(wèn)我們準(zhǔn)守RCTBridgeModule的原生類
import { NativeModules } from 'react-native';
//獲取原生封裝的類
var manager = NativeModules.你的原生類名;
//使用對(duì)象調(diào)用方法
manager.方法名(參數(shù));
以上是RN調(diào)用原生代碼
當(dāng)我們封裝好的iOS組件要如何導(dǎo)出到RN的文件夾,不依賴于iOS項(xiàng)目?
1.首先我們要?jiǎng)?chuàng)建一個(gè)靜態(tài)庫(kù)
2.打開(kāi)我們的靜態(tài)庫(kù),保存到你的RN項(xiàng)目里要保存的文件夾里。
3.靜態(tài)庫(kù)配置
在該設(shè)置中添加值為$(SRCROOT)/../../react-native/React,并設(shè)置為recursive。
4.設(shè)置完成后打開(kāi)iOS項(xiàng)目文件
添加完成后需要把我們的靜態(tài)庫(kù)導(dǎo)入iOS項(xiàng)目中
添加完成后,我們的項(xiàng)目就可以使用我們導(dǎo)出的iOS原生組件了。