React Native 封装iOS原生组件事件点击的理解(二)

基于前一篇文章的讨论https://blog.csdn.net/baihailing/article/details/86534104，对此作者（https://blog.csdn.net/chelongfei/article/details/80604578）的代码进行了修改。

该代码的功能主要是实现点击原生button,实现事件的传递。

1.在iOS端还是四个文件：

CLFButton.h文件进行属性的声明：

#import <UIKit/UIKit.h>
#import <React/RCTComponent.h>

NS_ASSUME_NONNULL_BEGIN

@interface CLFButton : UIButton
@property(nonatomic,copy)RCTBubblingEventBlock onClick;
@property(nonatomic,copy)NSString *normalTitle;
@property(nonatomic,copy)NSString *selectedTitle;

@end

NS_ASSUME_NONNULL_END

CLFButton.h实现点击事件和button标题的显示，两个set 方法设置button 的标题，btnSelected实现button状态的改变（很渣，搞了一年的ios,今天才知道button 的状态改变后，预设的标题也会跟着改变），同时传值给JS端。

#import "CLFButton.h"

@implementation CLFButton

- (id)initWithFrame:(CGRect)frame {
  self = [super initWithFrame:frame];
  if (self) {
    
  [self addTarget:self action:@selector(btnSelected) forControlEvents:UIControlEventTouchUpInside];
    
  }
  return self;
}

- (void)setNormalTitle:(NSString *)normalTitle {
  
  _normalTitle = normalTitle;
    [self setTitle:self.normalTitle forState: UIControlStateNormal];
}

-(void)setSelectedTitle:(NSString *)selectedTitle {
  
  _selectedTitle = selectedTitle;
  [self setTitle:self.selectedTitle forState: UIControlStateSelected];
}

- (void)btnSelected {

  self.selected = !self.selected;
  if (!self.onClick){
    
    return;
    
  }
  
  NSLog(@"现在的标题是:%@",self.titleLabel.text);
  self.onClick(@{@"msg": @"我是测试信息", @"isSelected": @(self.isSelected)});
}

@end

在CLFButtonManager.h

#import <React/RCTViewManager.h>

NS_ASSUME_NONNULL_BEGIN

@interface CLFButtonManager : RCTViewManager

@end

NS_ASSUME_NONNULL_END

在CLFButtonManager.m进行属性的传递

#import "CLFButtonManager.h"
#import "React/RCTBridge.h"
#import "CLFButton.h"


@implementation CLFButtonManager

RCT_EXPORT_MODULE()

RCT_EXPORT_VIEW_PROPERTY(onClick, RCTBubblingEventBlock)
RCT_EXPORT_VIEW_PROPERTY(normalTitle,NSString)
RCT_EXPORT_VIEW_PROPERTY(selectedTitle,NSString)

- (UIView *)view {
  
  return [CLFButton buttonWithType: UIButtonTypeCustom];

}

@end

2.在JS端进行调用

新建CLFButton.js 文件，

import React,{ Component } from 'react';
import PropTypes from 'prop-types';
import { requireNativeComponent } from 'react-native';

var CLF = requireNativeComponent('CLFButton',CLFButton);


export default  class CLFButton extends Component {
    static propTypes = {
        normalTitle:PropTypes.string,
        selectedTitle: PropTypes.string,
        onChange: PropTypes.func,
    };

    _onChange = (event) => {
        console.warn(`${event.nativeEvent["msg"]},当前按钮:${event.nativeEvent["isSelected"] ? "选中状态" : "正常状态"}`, );
    }

    render() { return <CLF {...this.props} onClick={this._onChange} />; }
}

在App.js 进行调用

import React, { Component } from 'react';
import CLFButton from "./CLFButton"
import {
  StyleSheet,
  Dimensions,
} from "react-native";

const {deviceWidth,deviceHeight} = Dimensions.get('window')

export default class App extends Component {
  constructor(props) {
    super(props)
  }


  render() {
    return (
       <CLFButton style={styles.imageViewStyle} normalTitle={"正常模式"} selectedTitle={"按下模式"}></CLFButton>
    );
  }
}


const styles = StyleSheet.create({
  imageViewStyle: {
      backgroundColor: "#FFFFFF",
      marginLeft:50,
      marginTop: 100,
      width: deviceWidth - 100,
      height: 400
  },
});

结果如下所示：