React Native 自定义圆角button的封装

前段时间一直在做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>

挺简单的吧！看完这个基本就可以做复杂控件了。