×

ReactNative之自定义高亮按钮

96
袁峥
2017.05.16 16:27* 字数 94

ReactNative之自定义高亮按钮

  • 在RN开发中,自带的按钮组件非常不好用,没有高亮状态,更加不可以自定义样式,要达到开发需求只能自定义按钮了。

自定义高亮按钮

  • 暴露以下属性
static propTypes = {
        // 普通状态
        title:PropTypes.string,
        imageUri:PropTypes.string,
        titleStyle:PropTypes.object,
        imageStyle:PropTypes.object,

        // 高亮状态
        highImageUri:PropTypes.string,
        highTitleStyle:PropTypes.object,

        // 监听点击
        onPressIn:PropTypes.func,
        onPressOut:PropTypes.func,

        // 按钮样式
        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 CommonHighButtonButton extends Component {

    static propTypes = {
        // 普通状态
        title:PropTypes.string,
        imageUri:PropTypes.string,
        titleStyle:PropTypes.object,
        imageStyle:PropTypes.object,

        // 高亮状态
        highImageUri:PropTypes.string,
        highTitleStyle:PropTypes.object,

        // 监听点击
        onPressIn:PropTypes.func,
        onPressOut:PropTypes.func,

        // 按钮样式
        buttonStyle:PropTypes.object

    };

    constructor(props){
        super(props);

        this.state = {
            highLighted:false
        }
    }

    render() {
        return (
            <TouchableOpacity style={[styles.buttonStyle,this.props.buttonStyle]}
                              onPressIn={()=>{
                                  this.setState({
                                      highLighted:true
                                  });

                                  if (this.props.onPressIn){
                                      this.props.onPressIn(this);
                                  }

                              }}
                              onPressOut={()=>{
                                  this.setState({
                                      highLighted:false
                                  });
                                  if (this.props.onPressOut){
                                      this.props.onPressOut(this);
                                  }
                                }
                              }
                              activeOpacity={this.props.highTitleStyle || this.props.highImageUri?0.9:0.3}
            >

                {/*文字*/}
                {this.props.title?<Text style={[this.props.titleStyle,this.state.highLighted?this.props.highTitleStyle:null]}>{this.props.title}</Text>:null}

                {/*头像*/}
                {this.props.imageUri?<Image source={{uri:this.state.highLighted && this.props.highImageUri?this.props.highImageUri: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
    }
});
  • 如何使用自定义高亮按钮
 <CommonHighButton imageUri='nav_item_game_icon'
                              imageStyle={{width:20,height:20}}
                              title='按钮'
                              highImageUri='nav_item_game_click_icon'
                              highTitleStyle={{color:'red'}}
            />
  • 实现效果
普通状态.png
高亮状态.png
日记本
Web note ad 1