【React Native开发】 - Touchable类组件的使用

1.Touchable类组件介绍

ReactNative没有像web开发那样可以给元素（组件）绑定click事件。不过可以通过onPress实现点击事件的处理。

 - TouchableHighlight:高亮触摸。用户点击时，会产生高亮效果。

 - TouchableOpacity:透明触摸。用户点击时，点击的组件会出现透明过渡效果。

 - TouchableWithoutFeedback:无反馈行触摸。用户点击时，点击的组件不会出现任何视觉变化。

 - TouchableNativeFeedback:（仅限Android）这个组件利用原生状态渲染触摸组件。由于不跨平台，不建议使用。

2.TouchableHighlight高亮触摸

在ReactNative App中，我们希望点击时会有视觉上的变化。视觉上的变化会告知我们已经点击了，避免重复点击。

TouchableHighlight组件属性有：

 - activeOpacity:触摸时透明度（0 - 1）；

 - onHideUnderlay:隐藏背景阴影时触发该事件；

 - onShowUnderlay:显示背景阴影时触发该事件；

 - underlayColor:点击时背景阴影效果的背景颜色。

3.TouchableOpacity透明触摸

TouchableOpacity组件不用设置背景颜色，该组件只有一个属性：activeOpacity。

4.TouchableWithoutFeedback无反馈行触摸

就像官网上所说的那样，除非有充足的理由，你才使用TouchableWithoutFeedback组件，一般不建议使用该组件，如果没有

反馈的话，就像web交互，而不是native交互。

TouchableWithoutFeedback组件支持3个事件：

 - onLongPress:长按事件；

 - onPressIn:触摸进入事件；

 - onPressOut:触摸释放事件。

5.注意事项

 - TouchableWithoutFeedback组件是触摸点击不带反馈效果的，另外三个有反馈效果。这三个组件都继承TouchableWithoutFeedback的属性。

 - TouchableHighlight和TouchableOpacity只有设置onPress后，对应的背景和透明度才有效。

6.实例

import React,{Component} from 'react'
import {
    StyleSheet,
    View,
    Text,
    TouchableHighlight,
    TouchableOpacity,
} from 'react-native'
export default class Root extends Component{
    constructor(props){
        super(props)
    }
    render(){
        return (
            <View style={styles.container}>
                <TouchableHighlight style={styles.touchableBtn} 
                                    activeOpacity={0.8}
                                    underlayColor='#FF3333'
                                    onPress={this.touchable.bind(this,'高亮触摸')}>
                    <Text style={styles.text}>TouchableHighlight触摸</Text>
                </TouchableHighlight>
                <TouchableOpacity style={[styles.touchableBtn,{marginTop:15}]}
                                  activeOpacity={0.8}
                                  onPress={this.touchableOpacity.bind(this,'透明触摸')}>
                    <Text style={styles.text}>TouchableOpacity触摸</Text>
                </TouchableOpacity>
            </View>
        )
    }
    touchable(text){
        alert(text)
    }
    touchableOpacity(text){
        alert(text)
    }
}
const styles = StyleSheet.create({
    container:{
        flex:1,
        justifyContent:'center',
        alignItems:'center',
    },
    touchableBtn:{
        backgroundColor:'#FD6363',
        padding:5,
        borderRadius:8,
    },
    text:{
        color:'#fff',
        fontSize:14,
    },
})

7.效果