React Native Button实现

使用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>
        );
    }
}

2. Change Style Button
使用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>
        );
    }
}

3. 单选按钮
实现代码：

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, 'isNotDealSelected', 'Btn_1', 20)}
                <View style={styles.buttondivideline}></View>
                {this._getButton(styles.buttonright, this.state.isDealedSelected, 'isDealedSelected', 'Btn_1', 30)}
            </View>
        );
    }
}

4. 上面案例中用的Style
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,
      alignItems: 'center',
      borderColor: 'red',
      borderWidth: 1,
      borderStyle: 'solid',
      borderRadius: 5,
  },
  exittext: {
      height: 50,
      fontSize: 18,
      textAlignVertical: 'center',
  },
  buttonlayout: {
      height: 30,
      marginTop: 30,
      alignSelf: 'center',
      flexDirection: 'row',
      alignItems: 'center',
      borderColor: '#32a7f5',
      borderWidth: 1,
      borderStyle: 'solid',
      borderRadius: 8,
  },
  buttonleft: {
      borderTopLeftRadius: 8,
      borderBottomLeftRadius: 8,
  },
  buttonright: {
      borderTopRightRadius: 8,
      borderBottomRightRadius: 8,
  },
  button: {
      height: 30,
      textAlign: 'center',
      textAlignVertical: 'center',
      paddingLeft: 10,
      paddingRight: 10,
  },
  buttondivideline: {
      width: 1,
      height: 30,
      backgroundColor: '#32a7f5',
      flexDirection: 'column',
  },
});

原文：https://blog.****.net/henglei1/article/details/52651917