前段时间一直在做react native开发,一直在忙,也没时间写东西,这次就打算认真地写点东西了。
感觉react native开发就是要先写组件(component),然后用组件去组装页面。组件写好了,后续开发就简单多了。不多说了,下面介绍下自定义圆角Button的封装。
'use strict';
import React, {
Component,
PropTypes,
} from 'react';
import {
StyleSheet,
PixelRatio,
Text,
View,
TouchableHighlight,
Platform,
} from 'react-native';
class RadiusBtn extends Component {
static propTypes = {
btnName: PropTypes.string,
textStyle: Text.propTypes.style,
btnStyle: TouchableHighlight.propTypes.style,
underlayColor: TouchableHighlight.propTypes.underlayColor,
};
static defaultProps = {
btnName: 'Button',
underlayColor: '#4169e1',
};
render() {
return (
<View style = {{
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',}}>
<TouchableHighlight
underlayColor={this.props.underlayColor}
activeOpacity={0.5}
style={[styles.center, styles.btnDefaultStyle, this.props.btnStyle]}
onPress={this.props.onPress}>
<Text style={[styles.textDefaultStyle, this.props.textStyle]}>{this.props.btnName}</Text>
</TouchableHighlight>
</View>
);
}
}
const styles = StyleSheet.create({
center: {
justifyContent:'center',
alignItems: 'center',
},
btnDefaultStyle: {
width: 100,
height: 20,
backgroundColor: '#ff8447',
borderColor: '#ff8447',
borderRadius: 15,
borderWidth: (Platform.OS==='ios' ? 1.0 : 1.5) / PixelRatio.get(),
},
textDefaultStyle: {
fontSize: 16,
color: '#ffffff',
},
});
module.exports = RadiusBtn;
static propTypes = { }; 这个方法是对定义的属性的类型设置并检验传入的类型。
static defaultProps = {} ; 这个是设置一些组件的默认属性。
其他没什么说的了,比较简单,用法如下:
<RadiusButton
btnName= 'btnName'
textStyle= {{
fontSize: 16,
color: '#ffffff',
}}
btnStyle= {{
width: 300,
height: 44,
borderRadius: 25,
}}
underlayColor= '#4169e1'
onPress={this._pressCreditClick} >
</RadiusButton>
挺简单的吧!看完这个基本就可以做复杂控件了。