React Native开发之按钮的使用

按钮是移动开发中一个非常常用的一个控件，在RN中使用按钮有3种：TouchableHighlight，TouchableOpacity，TouchableWithoutFeedback。

TouchableHighlight

就是点击后会改变按钮颜色和透明度，看下面这个例子：

var App = React.createClass({

    render: function () {
        return (
            
                style={styles.btn} underlayColor={'#ff0000'} onPress={this._onPress}>
                    style={styles.btnText}>
                        我是按钮
                    
                

            
        );

    },

    _onPress: function () {
        console.log('点击了按钮');
    }

});

var styles = StyleSheet.create({
    btn: {
        width: 100,
        height: 50,
        alignItems: 'center',
        justifyContent: 'center',
        alignSelf: 'center',
    },

    btnText: {
        fontSize: 18
    }
});

写了一个非常简单的例子，TouchableHighlight实现了一个按钮，里面包含了一个Text。注意TouchableHighlight只能有一个子控件，如果有多个要用View包起来。

下面为未点击的状态，默认是白色

主要看看TouchableHighlight设置的属性，underlayColor表示点击时的颜色，这里设置为红色，onPress则是按钮响应事件。

下面看看点击的效果：

按钮变成了红色。

另外一个属性是activeOpacity，表示点击按钮是的透明度，默认为0.8。范围应该是0-1

下面如果把activeOpacity改为0.2，效果如下，点击后透明度有了明显的变化。

TouchableOpacity

理解了TouchableHighlight之后，TouchableOpacity就很好理解了，点击的时候没有了背景色的变化，只有透明度的变化，只要设置activeOpacity即可。

但是TouchableOpacity的activeOpacity是0.2，看源码可以发现。

TouchableWithoutFeedback

官网是不推荐使用这个按钮的，Do not use unless you have a very good reason

因为这个点击无任何的ui反馈。

只提供了几个事件的处理:

onPressIn－－用户刚点击

onPressOut－－用户手指离开按钮

onPress－－用户完成一次点击事件

onLongPress－－长按事件

一般来说用户完成一次点击：onPressIn－>onPressOut－>onPress

但是如果用户按下按钮后移动到按钮外：onPressIn－>onPressOut

扩展

日常开发中经常需要使用一些圆角的按钮，android中是设置radius，RN里也类似，只要在按钮的style中设置borderRadius的值，越大越圆。

效果：

代码：

var App = React.createClass({

    render: function () {
        return (
            
                style={styles.btn} onPress={this._onPress}>
                    style={styles.btnText}>
                        我是按钮
                    
                

            
        );

    },

    _onPress: function () {
        console.log('_onPress');
    },


});

var styles = StyleSheet.create({
    btn: {
        width: 100,
        height: 50,
        alignItems: 'center',
        justifyContent: 'center',
        alignSelf: 'center',
        backgroundColor:'#ff0000',
        borderRadius:10
    },

    btnText: {
        fontSize: 18
    }
});