react-native触摸组件TouchableHighlight

最新推荐文章于 2023-08-20 17:35:16 发布

番薯大佬

最新推荐文章于 2023-08-20 17:35:16 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： react-native学习文章标签： react-native RN rn触摸组件TouchableHighlight 触摸组件TouchableHighlight

本文链接：https://blog.youkuaiyun.com/potato512/article/details/80353619

react-native学习专栏收录该内容

25 篇文章

订阅专栏

本文主要介绍在React-Native（RN）中如何使用触摸组件TouchableHighlight，包括其基本用法、代码示例及注意事项，如通过underlayColor属性定制触摸时的背景颜色。同时提供了学习资源和QQ交流群信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

学习交流：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<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可以设置触摸时的背景颜色。