TouchableOpacity组件(绑定事件)

最新推荐文章于 2025-05-29 00:19:33 发布

小毅哥哥

最新推荐文章于 2025-05-29 00:19:33 发布

阅读量2.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： react-native 文章标签： Touchable 组件绑定事件

本文链接：https://blog.youkuaiyun.com/qq_19678579/article/details/73379594

react-native 专栏收录该内容

19 篇文章

订阅专栏

本文介绍如何使用React Native中的TouchableOpacity组件来为应用中的元素添加触摸交互功能。文章通过一个简单的搜索按钮示例展示了如何绑定点击事件，并实现了点击时的视觉反馈效果。

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

这里写图片描述

代码实现(index.ios.js)

//TouchableOpacity组件(绑定事件)

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

/*
    React Native 提供了3个组件用于给其他没有触摸事件的组件绑定触摸事件
    TouchableOpacity 透明触摸,点击时,组件会出现透明过度效果
    TouchableHighlight  高亮触摸,点击时.组件会出现高亮效果
    TouchableWithoutFeedback 无反馈性触摸,点击时,组件无视觉变化
    需要导入组件
*/

// 组件
var HelloReactNative = 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.btn} onPress={this.clickBtn}>
                    <Text style={styles.search}>搜索</Text>
                </TouchableOpacity>
            </View>
        );
    }
});
//样式
var 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
    },
    btn:{
        width:55,
        marginLeft:5,
        marginRight:5,
        backgroundColor:"#2873ff",
        height:45,
        justifyContent:"center",
        alignItems:"center"
    },
    search:{
        color:"#FFF",
        fontSize:15,
        fontWeight:"bold"
    }
});


AppRegistry.registerComponent('HelloReactNative', () => HelloReactNative);