React Native 封装iOS原生组件事件点击的理解(二)
时间:2019-01-18
本文章向大家介绍React Native 封装iOS原生组件事件点击的理解(二),主要包括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
},
});
结果如下所示:
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 服务出错优先考虑及排查手册(待续整理)
- Android 沉浸式全屏
- Spark SQL 小文件问题处理
- vue常用的修饰符有哪些?
- 在 ASP.NET WebAPI 中使用 DataAnnotations 验证数据
- CSS简笔画:纯CSS绘制一艘邮轮
- NHibernate 多对多映射的数据更新
- 使用 AngularJS 的 $resource 连接 WebAPI Controller
- CentOS7.8下编译muduo库找不到Boost库报错的解决方法
- 使用 OWIN 搭建 OAuth2 服务器
- Hive on spark下insert overwrite partition慢的优化
- 系统学习Lambda表达式
- 一文搞懂 Flink Kafka Consumer 类两阶段提交
- 在 Nowin 下运行 ASP.NET 5 Beta 2
- Bytom侧链Vapor源码浅析-节点出块过程