ReactNative学习----12按钮组件TouchableHighlight使用

最新推荐文章于 2024-03-30 14:58:55 发布

zhaihaohao1

最新推荐文章于 2024-03-30 14:58:55 发布

阅读量348

点赞数

分类专栏： ReactNative

本文链接：https://blog.csdn.net/zhaihaohao1/article/details/88632634

版权

这篇博客主要介绍了ReactNative中的TouchableHighlight组件，详细解释了如何使用此组件来创建响应式按钮。提供了官方文档链接及可直接使用的代码示例，帮助读者快速上手。

摘要由CSDN通过智能技术生成

官方文档：
https://reactnative.cn/docs/touchablehighlight/#docsNav

代码复制即可使用
代码：
TouchableHighlightDemo.js

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

/**
 *  Flexbox 布局
 *  https://reactnative.cn/docs/touchablehighlight/#docsNav
 */
export default class TouchableHighlightDemo extends Component {
    //渲染数据
    render() {
        return (
            <View style={styles.root}>
                <TouchableHighlight  onPress={() => this.myOnclick()} underlayColor="#FFCC00">
                    <Text style={styles.textStyle}>按钮</Text>
                </TouchableHighlight>

            </View>

        );
    }

    myOnclick = () => {
        alert('按钮点击了');