RN中的按钮

Touchable系列组件

为了能让视图能够响应用的的点击事件，我们需要借助Touchablexxx组件，来包裹我们的视图。
下面是四个Touchable系列的组件一一举例

TouchableWithoutFeedback：响应用户的点击事件，如果你想在处理点击事件的同时不显示任何视觉反馈，使用它是个不错的选择。
TouchableHighlight：在TouchableWithoutFeedback的基础上添加了当按下时背景会变暗的效果。
TouchableOpacity：相比TouchableHighlight在按下去会使背景变暗的效果，TouchableOpacity会在用户手指按下时降低按钮的透明度，而不会改变背景的颜色。
TouchableNativeFeedback：在Android上还可以使用TouchableNativeFeedback，它会在用户手指按下时形成类似水波纹的视觉效果。注意，此组件只支持Android。

TouchableWithoutFeedback

TouchableWithoutFeedback一个Touchable系列组件中最基本的一个组价，只响应用户的点击事件不会做任何UI上的改变，在使用的过程中需要特别留意。

提示：无论是TouchableWithoutFeedback还是其他三种Touchable组件，都是在根节点都是只支持一个组件，如果你需要多个组件同时相应单击事件，可以用一个View将它们包裹着，它的这种根节点只支持一个组件的特性和ScrollView很类似。也就是TouchableWithoutFeedback之下必须只含有一个子View

export default class TouchableWithoutFeedbackTest extends Component {

    constructor(props){
        super();
        this.state={
            count:0
        }
    }


    render() {
        return(
            <View>
        <TouchableWithoutFeedback
            onPress={()=> {
                this.setState({count: this.state.count+1})
            }}
            onLongPress={()=>{
                Alert.alert('提示','确定要删除吗？',[
                    {text:'取消',onPress:()=>{}, style:'cancel'},
                    {text:'确定',onPress:()=>{}, style:''}
                ])


            }}
            delayLongPress={5000}>  
            <View style={styles.button}>
                <Text style={styles.buttonText}>
                    我是TouchableWithoutFeedback,单击我
                </Text>
            </View>
        </TouchableWithoutFeedback>
        <Text style={styles.text}>您单击了:{this.state.count}次</Text>
            </View>
    )
    }
}
const styles = StyleSheet.create({
    button:{
        borderWidth:1,
    },
    buttonText:{
        fontSize:18
    },
    text:{
        fontSize:25
    }
});

里面是空间的点击事件和长按事件
里面最常用的几个属性

onPress(); 点击的时候
onLongPress();长按的时候
delayLongPress();长按的时间间隔
disabled true-禁止再次点击 false-可以点击这个属性可以达到禁用按钮的效果
onPressIn()在开始点击的时候触发的事件
onPressOut() 在结束点击的时候触发的事件
delayPressIn() 从用户点击按钮到onPressIn 被回调的延时
delayPressOut() 从用户点击按钮后到onPressOut（）的延时时间
下面是 disabled的事例

export default class DisabledText extends Component {

    constructor(props){
        super();
        this.state={
            press:false,
            text:'啥也没有'
        }
    }


    render() {
        return (
            <View>
                <TouchableWithoutFeedback
                    onPress={()=>{
                        this.setState({
                            press:true,
                            text:'正在登陆....'
                        })
                         setTimeout(()=>{
                            this.setState({
                                press:false,
                                text:'暂时不能登录....'
                            })
                        },2000)
                    }}
                    disabled={this.state.press}
                >
                    <View>
                        <Text>
                            点几发动机阿卡丽附近
                        </Text>
                    </View>
                </TouchableWithoutFeedback>
                <Text>
                    {this.state.text}
                </Text>
            </View>
        )
    }
}

TouchableHighlight的使用

TouchableHighlight 是Touchable系列组件中比较常用的一个，它是在TouchableWithoutFeedback 的基础上添加了一些UI上的扩展，既当手指按下的时候，该视图的不透明度会降低，同时会看到相应的颜色(视图变暗或者变亮)，从TouchableHighlight 的源码中我们可以看出，其实这个颜色就是在TouchableHighlight 的最外层个添加了一个View，通过改变这个View的背景色及透明度来达到这一效果。

activeOpacity
我们可以通过activeOpacity来设置TouchableHighlight 被按下时的不透明度，从TouchableHighlight 的源码中可以看出，它的默认不透明度为0.85，我们可以根据需要进行调节。
underlayColor 按下去的颜色默认状态下为balck黑色。

import React, { Component } from 'react';

import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TouchableWithoutFeedback,
    Alert,
    TouchableHighlight
} from 'react-native';

export default class TouchableHighlightTest extends Component {

    constructor(props){
        super();
        this.state={
            count:0
        }
    }


    render() {
        return(
            <View>
                <TouchableHighlight
                    activeOpacity={0.5}
                    underlayColor='green'
                    onHideUnderlay={()=>{
                        this.setState({text:'衬底被隐藏'})
                    }}
                    onShowUnderlay={()=>{
                        this.setState({text:'衬底显示'})
                    }}
                    onPress={()=>{

                    }}
                >
                    <View  >
                        <Text  >
                            TouchableHighlight
                        </Text>
                    </View>
                </TouchableHighlight>
                <Text>{this.state.text}</Text>
            </View>
        )
    }
}

TouchableOpacity的使用

TouchableOpacity也是Touchable系列组件中比较常用的一个，它是在TouchableWithoutFeedback的基础上添加了一些UI上的扩展，但这些扩展相比TouchableHighlight 少了一个额外的颜色变化。它是通过在按下去改变视图的不透明度来表示按钮被点击的。

在扩展属性方面TouchableOpacity相比TouchableHighlight，就少了很多，只有一个activeOpacity，来设置按下去的透明度。

export default class TouchableOpacityTest extends Component {

    constructor(props){
        super();
        this.state={
            count:0,
            text:'d'
        }
    }


    render() {
        return(
            <View>
                <TouchableOpacity
                    activeOpacity={0.5}

                    onPress={()=>{
                        this.setState({
                            text:'点击了'
                        })
                    }}>
                    <View>
                        <Text>
                            TouchableHighlight
                        </Text>
                    </View>
                </TouchableOpacity>
                <Text>{this.state.text}</Text>
            </View>
        )
    }
}

TouchableNativeFeedback

为了支持Android5.0新增的触控反馈，React Native加入了TouchableNativeFeedback 组件，TouchableNativeFeedback 在TouchableWithoutFeedback 所支持的属性的基础上增加了按下去的水波纹效果。我们可以通过background 属性来自定义原生触摸操作反馈的背景。(只支持android)

里面有个属性是 background
决定在触摸反馈的时候显示什么类型的背景。它接受一个有着type属性和一些基于type属性的额外数据的对象。推荐使用以下的静态方法之一来创建这个对象：

1. TouchableNativeFeedback.SelectableBackground() - 会创建一个对象，表示安卓主题默认的对于被选中对象的背景。(?android:attr/selectableItemBackground)
1. TouchableNativeFeedback.SelectableBackgroundBorderless() - 会创建一个对象，表示安卓主题默认的对于被选中的无边框对象的背景。(?android:attr/selectableItemBackgroundBorderless)。只在Android API level 21+适用。
1. TouchableNativeFeedback.Ripple(color, borderless) - 会创建一个对象，当按钮被按下时产生一个涟漪状的背景，你可以通过color参数来指定颜色，如果参数borderless是true，那么涟漪还会渲染到视图的范围之外。（参见原生的actionbar buttons作为该效果的一个例子）。这个背景类型只在Android API level 21+适用也就是Android5.0或以上设备。

export default class TouchableNativeFeedbackTest extends Component {

    constructor(props){
        super();
        this.state={
            count:0,
            text:'d'
        }
    }


    render() {
        return(
            <View>
                <TouchableNativeFeedback

                    background={TouchableNativeFeedback.SelectableBackgroundBorderless()}>

                    onPress={()=>{
                        this.setState({
                            text:'点击了'
                        })
                    }}>
                    <View>
                        <Text>
                            TouchableHighlig
                        </Text>
                    </View>
                </TouchableNativeFeedback>
                <Text>{this.state.text}</Text>
            </View>
        )
    }
}

参考地址传送门

RN中的按钮

RN中的按钮

Touchable系列组件

TouchableWithoutFeedback

TouchableHighlight的使用

TouchableOpacity的使用

TouchableNativeFeedback

相关阅读更多精彩内容

友情链接更多精彩内容