react-native触摸组件TouchableHighlight

学习交流：https://gitee.com/potato512/Learn_ReactNative

react-native学习交流QQ群：806870562

效果图

代码示例

import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Text,
    Alert,
    TouchableHighlight
} from 'react-native';

type Props = {};
export default class TouchableHighlightPage extends Component {
    render() {
        return(
            
                
                    TouchableHighlight组件用于封装视图，使其可以正确响应触摸操作。当按下的时候，封装的视图的不透明度会降低，同时会有一个底层的颜色透过而被用户看到，使得视图变暗或变亮。
                
                 {
                    Alert.alert("查找")
                }}>
                    查找
                
                 {
                    Alert.alert("长按——确定")
                }}>
                    长按——确定
                
            
        );
    }
}

const styles = StyleSheet.create({
   viewContainer:{
       margin:20,
       backgroundColor:"#F0FFFF",
   },
   textStyle:{
       margin:10,
       backgroundColor:"#FFFFF0",
       color:"blue",
   },
   touchStyle:{
       margin:10,
       width:60,
       height:30,
       backgroundColor:"brown",

       justifyContent:"center",
       alignItems:"center",
   }
});

注意：使用属性underlayColor可以设置触摸时的背景颜色。