react native Touchable 系列组件使用详解

Touchable 系列组件包括：

• TouchableHighlight:点击高亮效果
• TouchableNativeFeedback:仅限Android平台，在Android设备上，利用原生状态来渲染触摸的反馈
• TouchableOpacity:透明效果
• TouchableWithoutFeedback：无任何反馈，为了更好的体验请不要使用此组件

特别说明：

这4个组件都只能有1个子节点，如果又多个子元素请使用View包装起来

共有的属性：

• delayLongPress number：设置延迟的时间，单位为毫秒。从onPressIn方法开始，到onLongPress被调用这一段时间，说白了就是按下大于delayLongPress的是长按，小于的算作点击（onPress），onPress和onLongPress是互斥的。
• delayPressIn number：单位是毫秒，从触摸操作开始到onPressIn被调用的延迟。
• delayPressOut number：单位是毫秒，从触摸操作结束开始到onPressOut被调用的延迟。
• onLongPress function：长按回调。
• onPress function：点击回调。
• onPressIn function：按下回调。
• onPressOut function：抬起回调。
• disabled bool：设为true，则禁用。
• onLayout function 加载或者组件的布局发生变化的时候调用。参数为{nativeEvent:{layout:{x,y,width,height}}}

TouchableHighlight:

• style View#style : 所有View的style。
• activeOpacity：激活时的透明度。默认 0.85
• onHideUnderlay function：当底层的颜色被隐藏的时候调用。
• onShowUnderlay function ：当底层的颜色被显示的时候调用。
• underlayColor string ：有触摸操作时显示出来的底层的颜色。默认 black

TouchableOpacity:

• activeOpacity：激活时的透明度。默认 0.2

TouchableNativeFeedback：仅限于android

• background backgroundPropType

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

1) TouchableNativeFeedback.SelectableBackground() - 会创建一个对象，表示安卓主题默认的对于被选中对象的背景。(?android:attr/selectableItemBackground)

2) TouchableNativeFeedback.SelectableBackgroundBorderless() - 会创建一个对象，表示安卓主题默认的对于被选中的无边框对象的背景。(?android:attr/selectableItemBackgroundBorderless)。只在Android API level 21+适用。

3) TouchableNativeFeedback.Ripple(color, borderless) - 会创建一个对象，当按钮被按下时产生一个涟漪状的背景，你可以通过color参数来指定颜色，如果参数borderless是true，那么涟漪还会渲染到视图的范围之外。（参见原生的actionbar buttons作为该效果的一个例子）。这个背景类型只在Android API level 21+适用。

Touchable 系列的组件都介绍完了，那我们到底要用哪个呢？下一篇我们就自己封装一个Touchable 组件。

Demo:

/**
 * Created by mengqingdong on 2017/4/19.
 */
import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    TouchableWithoutFeedback,
    Text,
    Platform,
    Image,
    TouchableOpacity,
    TouchableHighlight,
    TouchableNativeFeedback,
} from 'react-native';

export default class TouchableDemo extends Component {

    render() {
        const {navigator} = this.props;
        return (
            <View style={styles.container}>
                <View style={styles.headerContainer}>
                    <Text style={styles.title} numberOfLines={1}>TouchableDemo</Text>
                    <TouchableOpacity
                        style={styles.touchable}
                        onPress={()=>{
                            navigator.pop();
                        }}>
                        <Image style={styles.backImg} source={require('../../imgs/back.png')}/>
                    </TouchableOpacity>

                </View>
                <TouchableWithoutFeedback
                    disabled={false}
                    onPress={()=>{
                        console.warn('onPress');
                    }}
                    onLongPress={()=>{
                        console.warn('onLongPress');
                    }}

                    onPressIn={()=>{
                        console.warn('onPressIn');
                    }}
                    onPressOut={()=>{
                        console.warn('onPressOut');
                    }}>
                    <View style={{height:30,marginTop:20,backgroundColor:'#cccccc'}}>
                        <Text>TouchableWithoutFeedback</Text>
                    </View>
                </TouchableWithoutFeedback>

                <TouchableHighlight
                    style={{height:30,marginTop:20,backgroundColor:'#cccccc',justifyContent:'center',alignItems:'center'}}
                    activeOpacity={0.85}
                    onHideUnderlay={()=>{
                        console.warn('onHideUnderlay');
                    }}
                    onShowUnderlay={()=>{
                        console.warn('onShowUnderlay');
                    }}
                    underlayColor='red'
                    onPress={()=>{
                        console.warn('onPress');
                    }}>
                    <Text>TouchableHighlight</Text>
                </TouchableHighlight>

                <TouchableOpacity
                    style={{height:30,marginTop:20,backgroundColor:'#cccccc',justifyContent:'center',alignItems:'center'}}
                    activeOpacity={0.5}

                    onPress={()=>{
                        console.warn('onPress');
                    }}>
                    <Text>TouchableOpacity</Text>
                </TouchableOpacity>

                <TouchableNativeFeedback
                    background={TouchableNativeFeedback.SelectableBackground()}
                    onPress={()=>{
                        console.warn('onPress');
                    }}>
                    <View style={{height:44,backgroundColor:'#cccccc',marginTop:20,justifyContent: 'center',alignItems: 'center',}}>
                        <Text>TouchableNativeFeedback</Text>
                    </View>
                </TouchableNativeFeedback>

            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    headerContainer: Platform.select({
        ios: {
            height: 74,
            paddingTop: 30,
            justifyContent: 'center',
            alignItems: 'center',
            borderColor: '#cccccc',
            borderBottomWidth: 1,
            backgroundColor: '#161616',
        },
        android: {
            height: 44,
            justifyContent: 'center',
            alignItems: 'center',
            borderColor: '#cccccc',
            borderBottomWidth: 1,
            backgroundColor: '#161616',
        },
    }),

    title: {
        color: 'white',
        fontSize: 17,
        paddingLeft: 100,
        paddingRight: 100,
    },

    backImg: {
        width: 20,
        height: 20,
    },
    touchable: Platform.select({
        ios: {
            position: 'absolute',
            paddingTop: 30,
            left: 0,
            top: 0,
            bottom: 0,
            justifyContent: 'center',
            alignItems: 'center',
        },
        android: {
            position: 'absolute',
            left: 0,
            top: 0,
            bottom: 0,
            justifyContent: 'center',
            alignItems: 'center',
        },
    })
})

github下载地址