如果對你的思路有丁點的幫助厉颤，麻煩幫忙點個??喲，謝謝Ｑ Ｎ鞫！躺翻！
我們新建一個RN工程 本文以 MyBasicUIDemo 為例
文章目的：封裝一個原生的UI 控件丧叽，在RN 上使用，
案例實現(xiàn)功能：
1 原生的view上有一個Button公你，Label踊淳，點擊按鈕的時候讓Label顯示文字
2 RN 上有一個text組件，如果原生的Laebl有文字陕靠，那么顯示oc傳遞的值迂尝，
未命名.gif
具體實現(xiàn)步驟：
1、打開RN工程下的ios工程剪芥，新建一個繼承自UIView的類 MyBasicView
注意點： 需要導入 #import <RCTComponent.h>
寫上如下代碼：
在 .h 中添加我們需要的屬性及方法
@interface MyBasicView : UIView
@property (nonatomic, strong) NSString *name; // Label上將來顯示的文字
@property (nonatomic, strong) RCTBubblingEventBlock onClickButton; // 封裝代碼塊 - 回調(diào)（用來接收oc傳遞的參數(shù)垄开，并顯示在text組件上）
@end
在 .m 中實現(xiàn)具體的代碼
#import "MyBasicView.h"
@interface MyBasicView ()
@property (nonatomic, weak) UILabel *myLabel;
@property (nonatomic, weak) UIButton *myButton;
@end
@implementation MyBasicView
- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
UILabel *label = [[UILabel alloc] init];
label.backgroundColor = [UIColor orangeColor];
_myLabel = label;
[self addSubview:label];
UIButton *button = [[UIButton alloc] init];
[_myButton sizeToFit];
_myButton = button;
[button setTitle:@"點擊我顯示文字" forState:UIControlStateNormal];
[button addTarget:self action:@selector(showText) forControlEvents:UIControlEventTouchUpInside];
[self addSubview:button];
}
return self;
}
- (void)layoutSubviews
{
[super layoutSubviews];
self.myLabel.center = CGPointMake(self.frame.size.width * 0.5, self.frame.size.height * 0.5);
self.myButton.center = CGPointMake(self.frame.size.width * 0.5, self.frame.size.height * 0.5 + 20);
}
- (void)showText
{
self.myLabel.text = self.name;
[self.myLabel sizeToFit];
// 執(zhí)行 block封裝的代碼 并向RN傳遞參數(shù)（NSDictionary *）
if (self.onClickButton) {
self.onClickButton(@{@"key":@"我是原生傳遞給RN的文字 - 小小", @"boolKey":@(self.myLabel.text.length)});
}
}
2、創(chuàng)建一個繼承自RCTViewManager的管理類 RCTMyBasicViewManager 來管理我們的原生控件 MyBasicView
2.1 在該類的 .m 文件夾下寫入宏
RCT_EXPORT_MODULE( )
2.2 實現(xiàn) - (UIView *)view ( )方法
#import "RCTMyViewManager.h"
#import "MyBasicView.h"
@implementation RCTMyViewManager
RCT_EXPORT_MODULE()
RCT_EXPORT_VIEW_PROPERTY(name, NSString)// 導出參數(shù)供RN 使用
RCT_EXPORT_VIEW_PROPERTY(onClickButton, RCTBubblingEventBlock)// 導出參數(shù)供RN 使用
- (UIView *)view
{
return [[MyBasicView alloc] init]; // MyBasicView的尺寸位置以及樣式由RN來控制
}
@end
3粗俱、在RN 中將這個view 加載進來
3.1 新建一個 MyView的js文件（名字隨便）
import React, { Component } from 'react';
import { requireNativeComponent } from 'react-native';
let RCTMyView = requireNativeComponent('RCTMyView', MyView);
// 注意 requireNativeComponent 參數(shù)1 為OC 文件中的 RCTMyViewManager 去掉Manager 说榆，參數(shù)2 為 js中的 MyView，
// 意思是：將 manager管理的view 映射到 我們創(chuàng)建的js組件中寸认，即：將原生view封裝在js組件中
export default class MyView extends Component {
render() {
return <RCTMyView {...this.props}/>
}
}
3.2 在index.ios.js中導入我們自定義組件MyView并使用
import MyView from './MyView'
export default class MyBasicUIDemo extends Component { render() {
return (
<View style={styles.container}>
<Text style={{marginTop:20,backgroundColor:'red'}}>
RN的text組件：{this.state.text}
</Text>
<MyView
style={styles.nativeViewStyle}
name='canshu'
// onClickButton 封裝代碼 - 拿到OC傳遞過來的值签财，顯示在自己的text組件上
// 取值注意點：必須通過nativeEvent來獲取
onClickButton={(e)=>{
if (e.nativeEvent.boolKey){
this.setState({
text:e.nativeEvent.key
})
}else {
this.setState({
text:'原生label的文字消失了'
})
}
}}/>
</View>
);
}}
最后 - 運行項目即可
