React Native触摸点击按钮详解 Touchable系列组件使用详解

• TouchableWithoutFeedback：响应用户的点击事件，如果你想在处理点击事件的同时不显示任何视觉反馈，使用它是个不错的选择。

• TouchableHighlight：在TouchableWithoutFeedback的基础上添加了当按下时背景会变暗的效果。（TouchableHighlight 只支持一个子节点（不能没有子节点也不能多于一个）。如果你希望包含多个子组件，可以用一个 View 来包装它们。）

• TouchableOpacity：相比TouchableHighlight在按下去会使背景变暗的效果，TouchableOpacity会在用户手指按下时降低按钮的透明度，而不会改变背景的颜色。

• TouchableNativeFeedback：在Android上还可以使用，它会在用户手指按下时形成类似水波纹的视觉效果。注意，此组件只支持Android。

• 代码测试如下，触摸点击，数字加1

import React, { Component } from 'react'
import { View,Text,StyleSheet,Button,FlatList,TouchableHighlight} from 'react-native'

export default class App3 extends Component {
    constructor(props){
        super(props)
        this.state={num:1}
        this.onclick=this.onclick.bind(this)
    }

    onclick(){
        this.setState({num:this.state.num+1})
    }
  render() {
    return (
        <View>
            <TouchableHighlight style={styles.container} onPress={this.onclick} underlayColor={"red"} activeOpacity={0.1}>
             {/*activeOpacity：指定封装的视图在被触摸操作激活时以多少不透明度显示（0 到 1 之间，默认值为 0.85）。需要设置 underlayColor：点击按下的颜色值。 */}
             {/*如果有多个组件，用需要view包裹 */}
                <View><Text>点击</Text></View>
            </TouchableHighlight>
            <TouchableOpacity style={styles.touch2} onPress={this.onclick}  activeOpacity={0.8}>
                {/* activeOpacity:透明度  此组件与 TouchableHighlight 的区别在于并没有额外的颜色变化，更适于一般场景 */}
                <Text>测试点击</Text>
            </TouchableOpacity>
            <Text>数字{this.state.num}</Text>
        </View>
    )
  }
}
const styles=StyleSheet.create({
    container:{
        height:30,
        backgroundColor:"pink",
        justifyContent:"center",
        alignItems:"center",
    },
    touch2:{
        height:30,
        backgroundColor:"#ccc",
        justifyContent:"center",
        alignItems:"center",
    }
})