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]這種形式獲取。
// iOS
IMYRNView *rootView = [[IMYRNView alloc] initWithModuleName:@"index.ios" bundleName:@"TestPage" initialProperties:@{@"arg":@"參數"} 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(){
          /*
            基礎組件需要實現
            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組件生命周期事件
// 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

#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要用的參數:請求參數,埋點,自定義... */
@property(nonatomic,assign)BOOL isNeedReloadPage;
@property(nonatomic,strong,readonly)IMYRNView *rnView;


@end
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容