React Native 02:原生容器类封装

RN中的JS部分的页面组件最终是在原生这边生成一个RCTRootView类的实例,且RN是在view层做的页面生命周期管理。好像不适合以单页面的形式接入到项目中,所以RN能不能像WebView那样的方式来使用?组件渲染有delegate回调给native?并且可以通过url来请求对应RN页面资源文件并且加载RN页面?能不能提供自动重新渲染页面的方法给原生调用?….

思路

1.继承RCTRootView

2.数据通信

1.容器–>RN(RN页面要用的参数:如请求参数,埋点,自定义等等)

  • 初始化RN页面
    容器内部初始化RN页面的时候允许传一个字典类型的自定义参数,它会在组件里根据key-value生成一些默认的props。RN也就可以通过this.props[key]这种形式获取。
1
2
3
4
5
6
// iOS
IMYRNView *rootView = [[IMYRNView alloc] initWithModuleName:@"index.ios" bundleName:@"TestPage" initialProperties:@{@"arg":@"参数"} componentDelegate:self];
// RN
componentDidMount(){
alert('arg'+this.props.arg);
}
  • 容器刷新RN页面方法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
       // iOS
    - (void)reloadPage {
    [self reloadPageWithProperties:nil];
    }
    - (void)reloadPageWithProperties:(NSDictionary *)params {
    [self.bridge.eventDispatcher sendAppEventWithName:@"reloadPageEvent"
    body:params];
    }
    //RN
    componentDidMount(){
    RNView.bridge_componentDidMount(){
    /*
    基础组件需要实现
    Native手动刷新RN页面,监听事件名称,实现函数
    */ DeviceEventEmitter.addListener('bridge_reloadPage',this.reloadPage.bind(this));
    }
    }
    reloadPage(args) {
    alert(args.arg1);
    }

2.RN->容器(桥接)

3.RN->RN(RN->容器->RN)

4.容器–>容器(直接传就行)

3.容器需要监听RN组件生命周期事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// iOS
#pragma mark - RN生命周期回调
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
#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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#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要用的参数:请求参数,埋点,自定义... */
@property(nonatomic,assign)BOOL isNeedReloadPage;
@property(nonatomic,strong,readonly)IMYRNView *rnView;


@end

Rui,<br>.....。