ReactNative之自定义选中按钮

前言

眼看很多公司都开始尝试使用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