RN中的JS部分的頁面組件最終是在原生這邊生成一個(gè)RCTRootView類的實(shí)例，且RN是在view層做的頁面生命周期管理。好像不適合以單頁面的形式接入到項(xiàng)目中，所以RN能不能像WebView那樣的方式來使用？組件渲染有delegate回調(diào)給native？并且可以通過url來請(qǐng)求對(duì)應(yīng)RN頁面資源文件并且加載RN頁面？能不能提供自動(dòng)重新渲染頁面的方法給原生調(diào)用？....
實(shí)現(xiàn)思路
1.繼承RCTRootView
2.數(shù)據(jù)通信
- 1.容器–>RN（RN頁面要用的參數(shù):如請(qǐng)求參數(shù)，埋點(diǎn)，自定義等等）
- 初始化RN頁面
容器內(nèi)部初始化RN頁面的時(shí)候允許傳一個(gè)字典類型的自定義參數(shù)，它會(huì)在組件里根據(jù)key-value生成一些默認(rèn)的props。RN也就可以通過this.props[key]這種形式獲取。
- 初始化RN頁面
// iOS
IMYRNView *rootView = [[IMYRNView alloc] initWithModuleName:@"index.ios" bundleName:@"TestPage" initialProperties:@{@"arg":@"參數(shù)"} componentDelegate:self];
// RN
componentDidMount(){
alert('arg'+this.props.arg);
}
- 容器刷新RN頁面方法
// iOS
- (void)reloadPage {
[self reloadPageWithProperties:nil];
}
- (void)reloadPageWithProperties:(NSDictionary *)params {
[self.bridge.eventDispatcher sendAppEventWithName:@"reloadPageEvent"
body:params];
}
//RN
componentDidMount(){
RNView.bridge_componentDidMount(){
/*
基礎(chǔ)組件需要實(shí)現(xiàn)
Native手動(dòng)刷新RN頁面，監(jiān)聽事件名稱，實(shí)現(xiàn)函數(shù)
*/
DeviceEventEmitter.addListener('bridge_reloadPage',this.reloadPage.bind(this));
}
}
reloadPage(args) {
alert(args.arg1);
}
- 2.RN->容器（橋接）
- 3.RN->RN（RN->容器->RN)
- 4.容器–>容器（直接傳就行）
3.容器需要監(jiān)聽RN組件生命周期事件
// iOS
#pragma mark - RN生命周期回調(diào)
RCT_EXPORT_METHOD(bridge_componentWillMount)
{
[NSObject imy_asyncMainBlock:^{
IMYRNView *view = (IMYRNView *)[[UIViewController imy_currentViewControlloer] view];
if ([view.componentDelegate respondsToSelector:@selector(componentWillMount:)]) {
[view.componentDelegate componentWillMount:view];
}
}];
}
RCT_EXPORT_METHOD(bridge_componentDidMount)
{
[NSObject imy_asyncMainBlock:^{
IMYRNView *view = (IMYRNView *)[[UIViewController imy_currentViewControlloer] view];
if ([view.componentDelegate respondsToSelector:@selector(componentDidMount:)]) {
[view.componentDelegate componentDidMount:view];
}
}];
}
// RN
componentDidMount(){
RNView.bridge_componentDidMount(){
}
}
代碼
IMYRNView.h
#import "RCTRootView.h"
#import "RCTBridgeModule.h"
#import "RCTLog.h"
@protocol RNViewComponentDelegate <NSObject>
@optional
- (void)componentWillMount:(RCTRootView *)rootView;
- (void)componentDidMount:(RCTRootView *)rootView;
- (void)rootView:(RCTRootView *)rootView componentWillReceiveProps:(id)nextProps;
- (BOOL)rootView:(RCTRootView *)rootView shouldComponentUpdateNextProps:(id)nextProps nextState:(id)nextState;
- (void)rootView:(RCTRootView *)rootView componentWillUpdateNextProps:(id)nextProps nextState:(id)nextState;
- (void)rootView:(RCTRootView *)rootView componentDidUpdateNextProps:(id)nextProps nextState:(id)nextState;
- (void)componentWillUnmount:(RCTRootView *)rootView;
@end
@interface IMYRNView : RCTRootView<RCTBridgeModule>
- (instancetype)initWithModuleName:(NSString *)moduleName;
- (instancetype)initWithModuleName:(NSString *)moduleName bundleName:(NSString *)bundleName;
- (instancetype)initWithModuleName:(NSString *)moduleName bundleName:(NSString *)bundleName initialProperties:(NSDictionary *)params;
- (instancetype)initWithModuleName:(NSString *)moduleName bundleName:(NSString *)bundleName initialProperties:(NSDictionary *)params componentDelegate:(id<RNViewComponentDelegate>)componentDelegate;
@property(nonatomic,weak) id<RNViewComponentDelegate> componentDelegate;
///刷新
- (void)reloadPage;
- (void)reloadPageWithProperties:(NSDictionary *)params;
@end
IMYRNViewController.h
#import <IMYPublic.h>
@class IMYRNView;
@interface IMYRNViewController : IMYPublicBaseViewController
@property(nonatomic,copy)NSString *navTitle;
@property(nonatomic,copy)NSString *bundleName;
@property(nonatomic,copy)NSString *moduleName;
@property(nonatomic,strong)NSDictionary *initialProperties;/**< RN要用的參數(shù):請(qǐng)求參數(shù)，埋點(diǎn)，自定義... */
@property(nonatomic,assign)BOOL isNeedReloadPage;
@property(nonatomic,strong,readonly)IMYRNView *rnView;
@end
