一、背景介绍
iOS项目基础上进行的混合开发，首页列表View和侧边栏View使用了RN的页面，其它页面还是使用原生的。我分别注册了这两个模块，现在希望点击RN侧边栏View的时候，RN首页列表View可以做出响应，比如开始刷新列表。
但我使用通知或者Block回调的时候，发现并不能实现需求，最后还是通过修改原生页面中的RCTRootView的appProperties 属性来通知RN的页面来做出响应！这里做一下记录，希望对大家有所帮助。
二、解决思路
1. 注册不同的模块
1. RN，index.js
// 首页
AppRegistry.registerComponent('home', () => HJYHomePage);
// 首页侧边栏全屏组件
AppRegistry.registerComponent('sidebarView', () => HJYHomeSidebarView);
2. 点击侧边栏模块中的一个按钮，首页模块做出响应
1. RN，HJYHomeSidebarView.js
/// 按钮事件
<TouchableOpacity
onPress={() => handleClickItem.bind(this)(rowItem, rowIndex)}>
</TouchableOpacity>
function handleClickItem(itemData) {
// 向原生的首页发送消息
RNHomeModule.clickSidebarViewSelectProvinceItemEvent(itemData);
}
2. 原生，RNHomeModule
/// 代理方法
@property (nonatomic, weak) id <RNHomeEventProtocol>delegate;
/// 侧边栏-点击省份切换
RCT_EXPORT_METHOD(clickSidebarViewSelectProvinceItemEvent:(NSDictionary *)data) {
if (self.delegate && [self.delegate respondsToSelector:@selector(nativeClickSelecteProvinceItem:)]) {
[self.delegate nativeClickSelecteProvinceItem:data];
}
}
// 定义代理方法
RNHomeEventProtocol.h
/// 省份列表-点击
- (void)nativeClickSelecteProvinceItem:(NSDictionary *)data;
3. 原生，RNHomeViewController.m
/// 遵守协议
@interface RNHomeViewController ()<RNHomeEventProtocol>
/// 代理方法，省份列表-点击
- (void)nativeClickSelecteProvinceItem:(NSDictionary *)dict {
dispatch_async(dispatch_get_main_queue(), ^{
// appProperties 就是js页面中的 props，当它改变时，js页面会监听到此变化
// time 时间戳是为了保证多次调用 appProperties 的值是不同的
self.rnRootView.appProperties = @{@"refresh": @(YES), @"entrance": @(1), @"time": [NSDate getCurrentDate:@"yyyy-MM-dd HH-mm-ss-SSS"]};
});
}
/// 创建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: 当props发生变化时执行，初始化render时不执行，
* 在这个回调函数里面，你可以根据属性的变化，通过调用this.setState()来更新你的组件状态，
* 旧的属性还是可以通过this.props来获取,这里调用更新状态是安全的，并不会触发额外的render调用
* @param {*} nextProps 新的props
* @return {*}
*/
UNSAFE_componentWillReceiveProps(nextProps) {
console.log('rn首页将收到新的props： ', this.props, nextProps);
if (nextProps.refresh) {
this.onRefresh(); // rn页面中定义的实现下拉刷新的方法
}
}
3. 总结问题
本来，在第3步的时候，打算使用原生向RN发送通知的方式来通知 HJYHomePage.js 做出响应的,可是收不到通知，应该是因为注册了不同的模块
3. 原生，RNHomeViewController.m
/// 代理方法，省份列表-点击
- (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
/// 发送通知-刷新表格
- (void)moduleSendNotificationToReFreshList {
if (hasListeners) {
[self sendEventWithName:@"HJYRefreshHomeListNotification" body:@{}];
}
}
5. RN，HJYHomePage.js
homeModule.addListener('HJYRefreshHomeListNotification', () => {
console.log('刷新表格');
this.onRefresh();
});
可是并不会走到这一步~~~
后来，我又尝试了使用Block的方式,发现第一次点击的时候是可以的，第二次点击的时候就报错啦，查了下资料，好像是内存的原因，block被释放了？
3. 原生，RNHomeViewController.m
/// 代理方法，省份列表-点击
- (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;
/// 省份列表-点击item
/// @param callback 回调
RCT_EXPORT_METHOD(xxclickSidebarViewSelectProvinceItem:(RCTResponseSenderBlock)callback) {
self.xxclickSidebarViewSelectProvinceItemCallback = callback;
}
5. RN，HJYHomePage.js
componentDidMount() {
RNHomeModule.xxclickSidebarViewSelectProvinceItem(() => {
});
}
网友评论