该代码的功能主要是实现点击原生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
},
});
结果如下所示:
PS:在完成这个Demo后,也思考过和此Demo的优劣,同事说我的方法效率会高点,同时具有封装性,自己也问了Q友,暂时也没得出个结论。看代码的话,感觉利用set 方法实现代码思路更清晰一点,有待继续探究。这两天看这个,传递事件总算有点眉目了,哈哈哈,今天周五哦~~
代码下载链接:Github