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

官方文档:
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 (
            
                 this.myOnclick()} underlayColor="#FFCC00">
                    按钮
                

            

        );
    }

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

const styles = StyleSheet.create({
    root: {
        height: 200,
        backgroundColor: '#FFFFCC',
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
    },
    //里面子组件的样式
    textStyle: {
        backgroundColor: '#3399FF',
        fontSize: 15,

        //组件中文字居中,和css中一样
        width: 90,
        lineHeight: 40,
        textAlign: 'center',
        borderRadius: 5,

    }

});




源码下载:
源码:bkdemo1----TouchableHighlightDemo.js
https://download.csdn.net/download/zhaihaohao1/11022393

你可能感兴趣的:(ReactNative)