沒(méi)有開(kāi)場(chǎng)閑話, 直接開(kāi)始啦
一. 原生項(xiàng)目集成 React-Native, JS 中調(diào)用iOS原生開(kāi)發(fā)組件遇到的問(wèn)題:
在進(jìn)行項(xiàng)目集成 React-Native 的過(guò)程中, 會(huì)遇到很多界面, 比較復(fù)雜, 需要使用原生組件實(shí)現(xiàn), 而在 React-Native 中寫(xiě)邏輯, 所以這個(gè)時(shí)候我們就需要在 JS 文件中使用調(diào)用原生的組件, 從文檔中我們發(fā)現(xiàn), 關(guān)于原生有兩種集成方法: 1. Native Module(原生組件, 以下簡(jiǎn)稱(chēng) NM) 2. Native UI Component (原生 UI 組件, 以下簡(jiǎn)稱(chēng) NUC)
就他們之間的區(qū)別, 首先 NM 是之間實(shí)現(xiàn)RCTBridgeModule協(xié)議, 而 NUC 是繼承自RCTViewManager, RCTViewManager同樣實(shí)現(xiàn)了RCTBridgeModule協(xié)議, 所有這兩者應(yīng)該沒(méi)有區(qū)別, 導(dǎo)出組件都是通過(guò) RCT_EXPORT_MODULE('指定導(dǎo)出組件的名稱(chēng),默認(rèn)類(lèi)名');宏導(dǎo)出, 導(dǎo)出屬性通過(guò)RCT_EXPORT_MODULE(屬性名稱(chēng), 屬性類(lèi)型, viewClass(Native 組件的類(lèi)型));宏 導(dǎo)出方法通過(guò) RCT_EXPORT_METHOD()在 NM 中導(dǎo)出方法直接在()中寫(xiě)原生方法即可如下:
// 這是一個(gè) NM 中的導(dǎo)出方法, 用于在 JS 令 Native push到下一界面
RCT_EXPORT_METHOD(pushNative:(NSString *)storyName controllerId:(NSString *)controllerId params:(NSDictionary *)json)
{
dispatch_async(dispatch_get_main_queue(), ^{
UIStoryboard *secondStoryBoard = [UIStoryboard storyboardWithName:storyName bundle:nil];
UIViewController *suitViewControllers = [secondStoryBoard instantiateViewControllerWithIdentifier:controllerId];
[suitViewControllers setHidesBottomBarWhenPushed:YES];
[self setproperties:suitViewControllers andParams:json];
[(UINavigationController *)[WN_GlobalUtil getCurrentNavigationController] pushViewController:suitViewControllers animated:YES];
});
}
// JS 中使用, 將箭頭方法聲明為屬性, 自動(dòng)綁定 this 為 class
avatorHandle = (event: Event) => {
console.log('event');
ReactTools.pushNative('UserCenter','Usercenters',{});
};
這里我要說(shuō)的是, 我覺(jué)得 NM 適合導(dǎo)出原生邏輯而導(dǎo)出原生 View 時(shí)應(yīng)該使用 NUM
所以我要將原生的一個(gè) HeaderView 導(dǎo)出到 RN 中使用
假設(shè)我們的 HeaderView 在項(xiàng)目總是這樣定義的
#import <UIKit/UIKit.h>
@class MineHeaderView;
@protocol MineHeaderViewDelegate <NSObject>
// 點(diǎn)擊頭像觸發(fā)的操作
- (void)mineHeaderViewDidClickAvatar:(MineHeaderView *)mineHeaderView;
// 另一項(xiàng)操作
- (void)clickProducting:(MineHeaderView *)mineHeaderView;
@end
@interface MineHeaderView : UIView
@property (nonatomic, weak) id<MineHeaderViewDelegate> delegate;
// 從 xib 中加載視圖的工廠方法
+ (instancetype)mineHeaderView;
// 顯示是刷新信息
- (void)show;
@end
首先創(chuàng)建 RCTxxxManager 類(lèi), 在這里是 RCTMineHeaderViewManager, RN 自動(dòng)去除前綴 RCT, 后綴 Manager
#import "RCTViewManager.h"
@interface RCTMineHeaderViewManager : RCTViewManager
@end
#import "RCTMineHeaderViewManager.h"
#import "RCTEventDispatcher.h"
#import "MineHeaderView.h"
#import "RCTUIManager.h"
#import "RCTBridge.h"
#import "UIView+React.h"
@interface RCTMineHeaderViewManager () <MineHeaderViewDelegate>
@end
@implementation RCTMineHeaderViewManager
// 導(dǎo)出組件
RCT_EXPORT_MODULE();
// 1.
RCT_EXPORT_METHOD(showHeaderView:(nonnull NSNumber *)reactTag) {
// 2.
[self.bridge.uiManager addUIBlock:^(RCTUIManager *uiManager, NSDictionary<NSNumber *,UIView *> *viewRegistry) {
// 3.
MineHeaderView *view = (MineHeaderView *) viewRegistry[reactTag];
if (!view || ![view isKindOfClass:[MineHeaderView class]]) {
RCTLogError(@"Cannot find Component with tag #%@", reactTag);
return;
}
// 4
[view show];
}];
}
- (UIView *)view {
// 指定關(guān)聯(lián)的 View
MineHeaderView *mineHeaderView = [MineHeaderView mineHeaderView];
mineHeaderView.delegate = self;
return mineHeaderView;
}
// 綁定事件
- (void)mineHeaderViewDidClickAvatar:(MineHeaderView *)mineHeaderView {
// 5.
[self.bridge.eventDispatcher sendInputEventWithName:@"handleAvatorEvent"
body:@{
@"target": mineHeaderView.reactTag
}];
}
// 綁定事件
- (void)clickProducting:(MineHeaderView *)mineHeaderView {
// 6.
[self.bridge.eventDispatcher sendInputEventWithName:@"doingProductProgress"
body:@{
@"target": mineHeaderView.reactTag
}];
}
// 6.
- (NSArray<NSString *> *)customBubblingEventTypes {
return @[
@"handleAvatorEvent",
@"doingProductProgress"
];
}
@end
1. 指定導(dǎo)出方法, 注意 reactTag參數(shù), 在 RN 中, 是通過(guò)一個(gè) reactTag 的參數(shù)將原生組件與 JS 中的調(diào)用連接, reactTag 是 JS 中傳遞過(guò)來(lái)的, 注意添加 nonull 關(guān)鍵字,否則 debug 模式會(huì)報(bào) Android不兼容錯(cuò)誤, 注意; 一開(kāi)始我用的__nonull, 不行, 查看 OC 新特性, 在變量時(shí)使用__nonull, 應(yīng)該沒(méi)錯(cuò), nonull 在 property 使用, 不知道此處為什么不行, 如果遇到的請(qǐng)指教, 謝謝
2. 導(dǎo)入 RCTBridge.h, 通過(guò) uiManager, 在 addUIBlock 中添加需要實(shí)現(xiàn)的邏輯, 我們可以使用 RCTUIManager 維護(hù)的 ViewRegistry 通過(guò) reactTag 獲得調(diào)用方法的組件
3. 我們可以使用 RCTUIManager 維護(hù)的 ViewRegistry 通過(guò) reactTag 獲得調(diào)用方法的組件
4. 獲得原生組件后, 調(diào)用原生的方法
5. 因?yàn)槲覀冊(cè)?HeaderView 要通過(guò)代理將點(diǎn)擊頭像的事件傳遞, 所以我們同樣將點(diǎn)擊事件傳入到 JS 中處理, 在傳遞事件時(shí)通過(guò) eventDispatch(事件分發(fā)) 處理, 在 RCTViewManager 中默認(rèn)處理了 press, change, focus, blur, submitEditing.. 事件, 在 JS 中調(diào)用時(shí)只需要添加 on 前綴即可監(jiān)聽(tīng)例如 onPress, onChange,.. 就默認(rèn)指定了事件, 如果想要自定義事件名稱(chēng), 請(qǐng)重寫(xiě) customBubblingEventTypes, 返回?cái)?shù)組, 在這個(gè)例子中我們重定義了handleAvatorEvent(點(diǎn)擊頭像),doingProductProgress(物品進(jìn)度) 兩個(gè)事件名稱(chēng)
6. 通過(guò) sendInputEventWithName:body: 對(duì)事件與 JS 進(jìn)行綁定, 第一個(gè)參數(shù)為事件名稱(chēng), 第二個(gè)參數(shù)為一個(gè)字典, 這個(gè)字典中一定要包含一個(gè) key-value @"target": reactTag, reactTag 是在 UIView+React.h 分類(lèi)中(默認(rèn)所有的 View都有 reactTag 屬性)
JS 中調(diào)用:
// MineHeaderView.js
'use strict';
import React,{
ListView,
Text,
View,
Image,
TouchableHighlight,
NativeModules,
Platform
} from 'react-native';
const RCT_UI_REF = 'MineHeaderView';
//
const { requireNativeComponent } = React;
// Native Modules
const ReactModules = React.NativeModules;
// MineHeaderView Native UI Component
const MineHeaderViewManager = ReactModules.MineHeaderViewManager;
// Native Modules
const ReactTools = ReactModules.WN_ReactTool;
class MineHeaderView extends React.Component {
constructor() {
super();
}
// 點(diǎn)擊頭像事件
avatorHandle = (event: Event) => {
console.log('event');
ReactTools.pushNative('UserCenter','Usercenters',{});
};
// 其他點(diǎn)擊事件
doingProProgress = (event: Event) => {
ReactTools.pushNative('DoingProduct', 'DoingProduct',{});
};
// 組件加載完成后, 執(zhí)行操作
componentDidMount() {
Platform.OS == 'ios' &&
MineHeaderViewManager.showHeaderView(React.findNodeHandle(this.refs[RCT_UI_REF]));
}
render() {
return (
<RCTMineHeaderView
ref = {RCT_UI_REF} {/* 指定組件的 ref */}
onHandleAvatorEvent = {this.avatorHandle}
onDoingProductProgress = {this.doingProProgress}
{...this.props}
/>
);
}
}
MineHeaderView.propTypes = {
};
// 第一個(gè)參數(shù)為指定的原生類(lèi)名 RCTMineHeaderViewManager 類(lèi)型, 默認(rèn)去除 Manager, MineHeaderView關(guān)聯(lián)的 JS 中組件(這個(gè)地方如果不明白參加 React-Native 文檔), RCTMineHeaderView 為一個(gè)變量, 在 MineHeaderView 中使用
var RCTMineHeaderView = requireNativeComponent('RCTMineHeaderView', MineHeaderView);
// 將封裝的原生組件供其他 JS 調(diào)用
module.exports = MineHeaderView;
// UserCenter.js
'use strict';
import React,{
ListView,
Text,
View,
Image,
TouchableHighlight,
} from 'react-native';
import MineHeaderView from './MineHeader';
class UserCenter extends React.Component {
constructor() {
super();
}
render() {
return (
<View>
<MineHeaderView />
</View>
);
}
}
React.AppRegistry.registerComponent('UserCenter', () => UserCenter);
以上就是第一次總結(jié), 可能存在疏誤, 請(qǐng)指出, 共同學(xué)習(xí)進(jìn)步, 謝謝, 以后會(huì)不定期更新
