前言
眼看很多公司都开始尝试使用ReactNative,达到跨平台开发，最近也写了很多文章，希望让更多想了解的同学快速上手ReactNative.
如果喜欢我的文章，可以关注我微博:袁峥Seemygo
ReactNative之自定义选中按钮
- 在RN开发中，自带的按钮组件非常不好用，没有选中状态，更加不可以自定义样式，要达到开发需求只能自定义按钮了。
自定义选中按钮
- 暴露以下属性
static propTypes = {
// 普通状态
title:PropTypes.string,
imageUri:PropTypes.string,
titleStyle:PropTypes.object,
imageStyle:PropTypes.object,
// 高亮状态
selectedImageUri:PropTypes.string,
selectedTitleStyle:PropTypes.object,
// 监听点击
onPressIn:PropTypes.func,
onPressOut:PropTypes.func,
// 选中状态
selected:PropTypes.bool,
// 按钮样式
buttonStyle:PropTypes.object
};
- 实现代码
/**
* Created by ithinkeryz on 2017/5/16.
*/
/**
* Created by ithinkeryz on 2017/5/15.
*/
import React, { Component,PropTypes} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image,
TouchableOpacity
} from 'react-native';
export default class CommonSelectButton extends Component {
static propTypes = {
// 普通状态
title:PropTypes.string,
imageUri:PropTypes.string,
titleStyle:PropTypes.object,
imageStyle:PropTypes.object,
// 高亮状态
selectedImageUri:PropTypes.string,
selectedTitleStyle:PropTypes.object,
// 监听点击
onPressIn:PropTypes.func,
onPressOut:PropTypes.func,
// 选中状态
selected:PropTypes.bool,
// 按钮样式
buttonStyle:PropTypes.object
};
constructor(props){
super(props);
this.state = {
selected:this.props.selected
}
}
render() {
return (
<TouchableOpacity style={[styles.buttonStyle,this.props.buttonStyle]}
onPressIn={()=>{
if (this.props.onPressIn){
this.props.onPressIn(this);
}
}}
onPressOut={()=>{
if (this.props.onPressOut){
this.props.onPressOut(this);
}
}}
activeOpacity={this.props.selectedImageUri || this.props.selectedTitleStyle?0.9:0.3}
>
{/*文字*/}
{this.props.title?<Text style={[this.props.titleStyle,this.props.selected?this.props.selectedTitleStyle:null]}>{this.props.title}</Text>:null}
{/*头像*/}
{this.props.imageUri?<Image source={{uri:this.state.selected && this.props.selectedImageUri?this.props.selectedImageUri:this.props.imageUri}} style={[styles.imageStyle,this.props.imageStyle]}/> : null}
</TouchableOpacity>
);
}
}
var styles = StyleSheet.create({
buttonStyle:{
backgroundColor:'white',
flexDirection:'row',
justifyContent:'center',
alignItems:'center'
},
imageStyle:{
marginLeft:3
}
});
- 如何使用自定义选中按钮
<CommonSelectButton imageUri='mine-sun-icon-click'
selectedImageUri='mine-moon-icon'
imageStyle={{width:20,height:20}}
onPressIn={(button)=>{
var selected = button.state.selected;
selected = !selected;
button.setState({
selected:selected
})
}}
/>
- 实现效果
普通状态.png
选中状态.png
