react-native触摸组件TouchableHighlight

青旅半醒 2022-05-24 01:14 134阅读 0赞

学习交流：[https://gitee.com/potato512/Learn\_ReactNative][https_gitee.com_potato512_Learn_ReactNative]

react-native学习交流QQ群：806870562

效果图

![20180517170316380][]

代码示例

import React, { Component } from 'react';
    import {
        StyleSheet,
        View,
        Text,
        Alert,
        TouchableHighlight
    } from 'react-native';
    
    type Props = {};
    export default class TouchableHighlightPage extends Component<Props> {
        render() {
            return(
                <View style={styles.viewContainer}>
                    <Text style={styles.textStyle}>
                        TouchableHighlight组件用于封装视图，使其可以正确响应触摸操作。当按下的时候，封装的视图的不透明度会降低，同时会有一个底层的颜色透过而被用户看到，使得视图变暗或变亮。
                    </Text>
                    <TouchableHighlight style={styles.touchStyle} underlayColor={"#FFFF00"} onPress={() => {
                        Alert.alert("查找")
                    }}>
                        <Text>查找</Text>
                    </TouchableHighlight>
                    <TouchableHighlight style={[styles.touchStyle, {width:120, backgroundColor:"#fffff0"}]} onLongPress={() => {
                        Alert.alert("长按——确定")
                    }}>
                        <Text>长按——确定</Text>
                    </TouchableHighlight>
                </View>
            );
        }
    }
    
    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**可以设置触摸时的背景颜色。

[https_gitee.com_potato512_Learn_ReactNative]: https://gitee.com/potato512/Learn_ReactNative
[20180517170316380]: /images/20220524/05b6d4c6d81e47078f3eecc2f653d826.png