一啡浊、背景介紹
iOS項(xiàng)目基礎(chǔ)上進(jìn)行的混合開發(fā)，首頁(yè)列表View和側(cè)邊欄View使用了RN的頁(yè)面胶背，其它頁(yè)面還是使用原生的巷嚣。我分別注冊(cè)了這兩個(gè)模塊，現(xiàn)在希望點(diǎn)擊RN側(cè)邊欄View的時(shí)候钳吟，RN首頁(yè)列表View可以做出響應(yīng)廷粒，比如開始刷新列表。
但我使用通知或者Block回調(diào)的時(shí)候，發(fā)現(xiàn)并不能實(shí)現(xiàn)需求坝茎，最后還是通過修改原生頁(yè)面中的RCTRootView的appProperties 屬性來通知RN的頁(yè)面來做出響應(yīng)涤姊！這里做一下記錄，希望對(duì)大家有所幫助嗤放。
二砂轻、解決思路
1. 注冊(cè)不同的模塊
1. RN，index.js
// 首頁(yè)
AppRegistry.registerComponent('home', () => HJYHomePage);
// 首頁(yè)側(cè)邊欄全屏組件
AppRegistry.registerComponent('sidebarView', () => HJYHomeSidebarView);
2. 點(diǎn)擊側(cè)邊欄模塊中的一個(gè)按鈕斤吐，首頁(yè)模塊做出響應(yīng)
1. RN搔涝，HJYHomeSidebarView.js
/// 按鈕事件
<TouchableOpacity
onPress={() => handleClickItem.bind(this)(rowItem, rowIndex)}>
</TouchableOpacity>
function handleClickItem(itemData) {
// 向原生的首頁(yè)發(fā)送消息
RNHomeModule.clickSidebarViewSelectProvinceItemEvent(itemData);
}
2. 原生，RNHomeModule
/// 代理方法
@property (nonatomic, weak) id <RNHomeEventProtocol>delegate;
/// 側(cè)邊欄-點(diǎn)擊省份切換
RCT_EXPORT_METHOD(clickSidebarViewSelectProvinceItemEvent:(NSDictionary *)data) {
if (self.delegate && [self.delegate respondsToSelector:@selector(nativeClickSelecteProvinceItem:)]) {
[self.delegate nativeClickSelecteProvinceItem:data];
}
}
// 定義代理方法
RNHomeEventProtocol.h
/// 省份列表-點(diǎn)擊
- (void)nativeClickSelecteProvinceItem:(NSDictionary *)data;
3. 原生和措，RNHomeViewController.m
/// 遵守協(xié)議
@interface RNHomeViewController ()<RNHomeEventProtocol>
/// 代理方法庄呈，省份列表-點(diǎn)擊
- (void)nativeClickSelecteProvinceItem:(NSDictionary *)dict {
dispatch_async(dispatch_get_main_queue(), ^{
// appProperties 就是js頁(yè)面中的 props，當(dāng)它改變時(shí)派阱，js頁(yè)面會(huì)監(jiān)聽到此變化
// time 時(shí)間戳是為了保證多次調(diào)用 appProperties 的值是不同的
self.rnRootView.appProperties = @{@"refresh": @(YES), @"entrance": @(1), @"time": [NSDate getCurrentDate:@"yyyy-MM-dd HH-mm-ss-SSS"]};
});
}
/// 創(chuàng)建RN視圖
- (void)initRnRootView:(NSDictionary *)propsDic {
RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:nil];
RCTRootView *rootView
...
self.rnRootView = rootView;
[self.view addSubview: rootView];
}
4. RN诬留，HJYHomePage.js
/**
* @description: 當(dāng)props發(fā)生變化時(shí)執(zhí)行，初始化render時(shí)不執(zhí)行贫母，
* 在這個(gè)回調(diào)函數(shù)里面文兑，你可以根據(jù)屬性的變化，通過調(diào)用this.setState()來更新你的組件狀態(tài)腺劣，
* 舊的屬性還是可以通過this.props來獲取,這里調(diào)用更新狀態(tài)是安全的绿贞，并不會(huì)觸發(fā)額外的render調(diào)用
* @param {*} nextProps 新的props
* @return {*}
*/
UNSAFE_componentWillReceiveProps(nextProps) {
console.log('rn首頁(yè)將收到新的props： ', this.props, nextProps);
if (nextProps.refresh) {
this.onRefresh(); // rn頁(yè)面中定義的實(shí)現(xiàn)下拉刷新的方法
}
}
3. 總結(jié)問題
本來，在第3步的時(shí)候橘原，打算使用原生向RN發(fā)送通知的方式來通知 HJYHomePage.js 做出響應(yīng)的,可是收不到通知籍铁，應(yīng)該是因?yàn)樽?cè)了不同的模塊
3. 原生，RNHomeViewController.m
/// 代理方法趾断，省份列表-點(diǎn)擊
- (void)nativeClickSelecteProvinceItem:(NSDictionary *)dict {
dispatch_async(dispatch_get_main_queue(), ^{
[self.rnHomeModule moduleSendNotificationToReFreshList];
// self.rnRootView.appProperties = @{@"refresh": @(YES), @"entrance": @(1), @"time": [NSDate date]};
});
}
4. 原生拒名，RNHomeModule.m
/// 發(fā)送通知-刷新表格
- (void)moduleSendNotificationToReFreshList {
if (hasListeners) {
[self sendEventWithName:@"HJYRefreshHomeListNotification" body:@{}];
}
}
5. RN，HJYHomePage.js
homeModule.addListener('HJYRefreshHomeListNotification', () => {
console.log('刷新表格');
this.onRefresh();
});
可是并不會(huì)走到這一步~~~
后來芋酌，我又嘗試了使用Block的方式,發(fā)現(xiàn)第一次點(diǎn)擊的時(shí)候是可以的增显，第二次點(diǎn)擊的時(shí)候就報(bào)錯(cuò)啦，查了下資料脐帝，好像是內(nèi)存的原因同云，block被釋放了？
3. 原生腮恩，RNHomeViewController.m
/// 代理方法梢杭，省份列表-點(diǎn)擊
- (void)nativeClickSelecteProvinceItem:(NSDictionary *)dict {
dispatch_async(dispatch_get_main_queue(), ^{
if (self.rnHomeModule.xxclickSidebarViewSelectProvinceItemCallback) {
self.rnHomeModule.xxclickSidebarViewSelectProvinceItemCallback();
}
// self.rnRootView.appProperties = @{@"refresh": @(YES), @"entrance": @(1), @"time": [NSDate date]};
});
}
4. 原生，RNHomeModule
@property (nonatomic, copy) RCTResponseSenderBlock xxclickSidebarViewSelectProvinceItemCallback;
/// 省份列表-點(diǎn)擊item
/// @param callback 回調(diào)
RCT_EXPORT_METHOD(xxclickSidebarViewSelectProvinceItem:(RCTResponseSenderBlock)callback) {
self.xxclickSidebarViewSelectProvinceItemCallback = callback;
}
5. RN秸滴，HJYHomePage.js
componentDidMount() {
RNHomeModule.xxclickSidebarViewSelectProvinceItem(() => {
});
}
