ReactNative Touchable 组件

最新推荐文章于 2025-03-26 15:07:18 发布

Carlos.Guo

最新推荐文章于 2025-03-26 15:07:18 发布

阅读量332

点赞数 1

CC 4.0 BY-SA版权

分类专栏： ReactNative 文章标签： ReactNative touchabl

本文链接：https://blog.csdn.net/GL_MINE_CSDN/article/details/73648006

ReactNative 专栏收录该内容

18 篇文章

订阅专栏

本文介绍 React Native 中 Touchable 系列组件的使用方法，包括 TouchableOpacity 的透明触摸效果、TouchableHighlight 的高亮效果及 TouchableWithoutFeedback 的无反馈触摸特性。通过一个示例展示了如何创建一个具有点击反馈的搜索按钮。

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

ReactNative Touchable 组件。

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    TextInput,
    Image,
} from 'react-native';

/**6、Touchcable 系列组件
 TouchcableOpacity 透明触摸，点击时，组件会出现透明过度效果
 TouchcableHighlight 高亮触摸，点击时，组件会出现高亮效果
 TouchcableWithoutFeeback 五反馈性触摸，点击时，组件无视觉变化
 需要导入组件
 */
let RnDemo = React.createClass({
    clickBtn: function () {
        alert("点击搜索按钮");
    },
    render: function () {
        return (
            <View style={styles.container}>
                <View style={styles.flex}>
                    <View style={styles.input}></View>
                </View>
                <TouchableOpacity style={styles.button} onPress={this.clickBtn}>
                    <Text style={styles.search}>搜索</Text>
                </TouchableOpacity>
            </View>
        );
    }
});

let styles = StyleSheet.create({
        container: {
            flexDirection: "row",
            height: 45,
            marginTop: 25,
        },
        flex: {
            flex: 1
        },
        input: {
            height: 45,
            borderWidth: 1,
            marginLeft: 5,
            paddingLeft: 5,
            borderColor: "#CCC",
            borderRadius: 4,
        },
        button: {
            width: 55,
            height: 45,
            marginLeft: 5,
            marginRight: 5,
            backgroundColor: "#23BEFF",
            justifyContent: "center",
            alignItems: "center",
        },
        search: {
            color: "#FFF",
            fontSize: 15,
            fontWeight: 'bold'
        },
    }
);