React|React Native Button封装
【React|React Native Button封装】react native 开发时，自带的button组件不能满足我们的开发需求。不支持背景图等设置。所以封装了一个简单的button 。代码如下
import React from "react";
import {
Text,
View,
StyleSheet,
TouchableOpacity,
Image
} from "react-native";
const styles = StyleSheet.create({
ButtonStyle: {
justifyContent: "center",
alignItems: "center"
},
contentStyle: {
backgroundColor: "transparent"
},
Text: {
textAlign: "center"
},
backgroundImage: {
width: "100%",
height: "100%",
position: "absolute",
zIndex: -2,
alignSelf: "center"
}
});
class Button extends React.Component {
constructor(props) {
super(props);
}
static defaultProps = {
style: {},
enable: true,
textStyle: {},
backgroundImage: null,
backgroundImageStyle: {},
type: "default"
};
render() {
return (
//可点击
{this.props.hasOwnProperty("title") ? (
{this.props.title}
) : null}
{this.props.hasOwnProperty("backgroundImage") ? (
);
}
}export default Button;
推荐阅读
- react|react 安装
- React.js学习笔记(17)|React.js学习笔记(17) Mobx
- React.js的表单(六)
- 【React|【React Native填坑之旅】从源码角度看JavaModule注册及重载陷阱
- react-navigation|react-navigation 动态修改 tabBar 样式
- Flutter|Flutter SwiftUI React 对比
- React|React refs和onRefs的使用
- 手写|手写 React-Native 方法调用式的 Modal 弹框、Toast 提示
- react组件通信
- react-native中Text包含Image大小问题