使用React Native实现Button的效果：

0. 概述

使用React Native的TouchableHighlight组件包装Text、Image或其他组件。因为TouchableHighlight有onPress回调方法，可以处理点击事件。

TouchableHighlight API

1. Basic Button实现

使用TouchableHightlight的属性/方法：

onPress：处理点击事件

underlayColor：点击时TouchableHightlight的颜色

实现代码：

// 普通按钮效果。
//点击时只改变背景色而不改变字体等样式，只需使用 TouchableHighlight 中的 underlayColor 属性
class BasicButton extends Component {
    render(){
        return(
            <TouchableHighlight
                style={styles.exit}
                underlayColor="#d9d9d9"
                onPress={() => {
                    console.log('Press Basic Button!');
                }}>
                <Text style={styles.exittext}>
                    Basic Button
                </Text>
            </TouchableHighlight>
        );
    }
}

使用TouchableHighlight的属性/方法：

onPress：处理点击事件

underlay：点击时underlay的颜色

onHideUnderlay：当underlay隐藏时会调用此方法。可以用来处理没有Touch按钮时的样式。

onShowUnderlay：当underlay显示时会调用此方法。可以用了处理Touch按钮时的样式。

实现代码：

// 点击时改变背景色同时改变按钮的字体颜色
// 需要使用TouchableHighlight的onHideUnderlay和onShowUnderlay属性
const RED_COLOR = 'red';
const WHITE_COLOR = 'white';

class ChangeStyleButton extends Component {
    constructor(props) {
        super(props);
        this.state = { pressStatus: false };
    }

    _onHideUnderlay(){
        this.setState({ pressStatus: false });
    }

    _onShowUnderlay(){
        this.setState({ pressStatus: true });
    }

    render(){
        return(
            <TouchableHighlight
                onHideUnderlay={this._onHideUnderlay.bind(this)}
                onPress={() => {
                    console.log('Press Change Style Button');
                }}
                onShowUnderlay={this._onShowUnderlay.bind(this)}
                style={[styles.exit,this.state.pressStatus ? {backgroundColor: RED_COLOR} : {backgroundColor: WHITE_COLOR}]}
                underlayColor='red'>
                <Text style={[styles.exittext,this.state.pressStatus ? {color: WHITE_COLOR} : {color: RED_COLOR}]}>
                    Change Style Button
                </Text>
            </TouchableHighlight>
        );
    }
}

实现代码：

class RedioButton extends Component {

    constructor(props) {
        super(props);
        this.state = {
            isAllSelected: false,isNotDealSelected: true,isDealedSelected: false,}
    }

    // 更新"全部/未处理/已处理"按钮的状态
    _updateBtnSelectedState(currentPressed,array) {
        if (currentPressed === null || currentPressed === 'undefined' || array === null || array === 'undefined') {
            return;
        }

        let newState = {...this.state};

        for (let type of array) {
            if (currentPressed == type) {
                newState[type] ? {} : newState[type] = !newState[type];
                this.setState(newState);
            } else {
                newState[type] ? newState[type] = !newState[type] : {};
                this.setState(newState);
            }
        }
    }

    // 返回设置的button
    _getButton(style,selectedSate,stateType,buttonTitle,count) {
        let BTN_SELECTED_STATE_ARRAY = ['isAllSelected','isNotDealSelected','isDealedSelected'];
        return(
            <View style={[style,selectedSate ? {backgroundColor: '#32a7f5'} : {}]}>
                <Text
                    style={[styles.button,selectedSate ? {color: 'white'} : {}]}
                    onPress={ () => {this._updateBtnSelectedState(stateType,BTN_SELECTED_STATE_ARRAY)}}>
                    {buttonTitle}({count})
                </Text>
            </View>
        );
    }

    render(){
        return(
            <View style={styles.buttonlayout}>
                {this._getButton(styles.buttonleft,this.state.isAllSelected,'isAllSelected','Btn_1',10)}
                <View style={styles.buttondivideline}></View>
                {this._getButton(null,this.state.isNotDealSelected,20)}
                <View style={styles.buttondivideline}></View>
                {this._getButton(styles.buttonright,this.state.isDealedSelected,'isDealedSelected',30)}
            </View>
        );
    }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,alignItems: 'center',backgroundColor: '#F5FCFF',},welcome: {
    fontSize: 20,textAlign: 'center',margin: 10,instructions: {
    textAlign: 'center',color: '#333333',marginBottom: 5,exit: {
      width: 380,height: 50,marginTop: 30,borderColor: 'red',borderWidth: 1,borderStyle: 'solid',borderRadius: 5,exittext: {
      height: 50,fontSize: 18,textAlignVertical: 'center',buttonlayout: {
      height: 30,alignSelf: 'center',flexDirection: 'row',borderColor: '#32a7f5',borderRadius: 8,buttonleft: {
      borderTopLeftRadius: 8,borderBottomLeftRadius: 8,buttonright: {
      borderTopRightRadius: 8,borderBottomRightRadius: 8,button: {
      height: 30,paddingLeft: 10,paddingRight: 10,buttondivideline: {
      width: 1,height: 30,backgroundColor: '#32a7f5',flexDirection: 'column',});