React Native 混编1 - 封装原生的UI控件(基本控

如果对你的思路有丁点的帮助，麻烦帮忙点个👍哟，谢谢！！！！

我们新建一个RN工程 本文以 MyBasicUIDemo 为例

文章目的：封装一个原生的UI 控件，在RN 上使用，

案例实现功能：
1 原生的view上有一个Button，Label，点击按钮的时候让Label显示文字
2 RN 上有一个text组件，如果原生的Laebl有文字，那么显示oc传递的值，

未命名.gif

具体实现步骤：

1、打开RN工程下的ios工程，新建一个继承自UIView的类 MyBasicView

注意点： 需要导入 #import <RCTComponent.h>
写上如下代码：

在 .h 中添加我们需要的属性及方法

@interface MyBasicView : UIView

  @property (nonatomic, strong) NSString *name;  // Label上将来显示的文字

  @property (nonatomic, strong) RCTBubblingEventBlock onClickButton;  // 封装代码块 - 回调（用来接收oc传递的参数，并显示在text组件上）

@end

在 .m 中实现具体的代码

#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];
// 执行 block封装的代码 并向RN传递参数（NSDictionary *）
  if (self.onClickButton) {
    self.onClickButton(@{@"key":@"我是原生传递给RN的文字 - 小小", @"boolKey":@(self.myLabel.text.length)});
  }
}

2、创建一个继承自RCTViewManager的管理类 RCTMyBasicViewManager 来管理我们的原生控件 MyBasicView

2.1 在该类的 .m 文件夹下写入宏
RCT_EXPORT_MODULE( )
2.2 实现 - (UIView *)view ( )方法

#import "RCTMyViewManager.h"

#import "MyBasicView.h"

@implementation RCTMyViewManager

RCT_EXPORT_MODULE()

RCT_EXPORT_VIEW_PROPERTY(name, NSString)// 导出参数供RN 使用

RCT_EXPORT_VIEW_PROPERTY(onClickButton, RCTBubblingEventBlock)// 导出参数供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 参数1 为OC 文件中的 RCTMyViewManager 去掉Manager ，参数2 为 js中的 MyView，
// 意思是：将 manager管理的view 映射到 我们创建的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>    
); 
 }}

最后 - 运行项目即可