react native Touchable 系列组件使用详解

来源：互联网发布：mac上用word办公软件编辑：程序博客网时间：2024/05/17 01:02

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下载地址

1 0