React-Native 按钮点击几种效果进行对比

React-Native 自定义按钮系列

对几种按钮点击效果进行比较
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Button,
    Alert,
    View,
    TouchableOpacity,
    TouchableHighlight,
    Text, TouchableWithoutFeedback,
} from 'react-native';

export default class ButtonView extends Component {
    render() {
        return(
            <View style={{
                backgroundColor: '#ffaaaa',
                flex: 1,
                alignItems: 'center',
                justifyContent: 'center'}}>
                <Button title="Button"
                        onPress={this.actionButton}
                        color={'#00f'}/>


                <TouchableOpacity style={styles.touchButton}
                                  onPress={() => {
                                      alert('TouchableOpacity')
                                  }}>
                    <Text style={styles.touchButtonText}>点击按钮1</Text>
                </TouchableOpacity>


                <TouchableHighlight activeOpacity={0.9}
                                    underlayColor={'#1aaf00'}
                                    style={[styles.touchButton]}
                                    onPress={() => {
                                        alert('TouchableHighlight')
                                    }}>
                    <Text style={styles.touchButtonText}>点击按钮2</Text>
                </TouchableHighlight>

                {/*显示背景 ,点击颜色, 透明度也是无效*/}
                <TouchableWithoutFeedback activeOpacity={0.9}
                                    underlayColor={'#1aaf00'}
                                    style={[styles.touchButton]}
                                    onPress={() => {
                                        alert('TouchableWithoutFeedback')
                                    }}>
                    <Text style={styles.touchButtonText}>点击按钮2</Text>
                </TouchableWithoutFeedback>

            </View>
        )
    }
    actionButton = () => {
        alert('Button')
    }
}
const styles = StyleSheet.create({
    touchButton: {
        height: 40,
        width: 100,
        borderRadius: 20,
        backgroundColor: '#fa1faa',
        justifyContent: 'center',
        overflow: 'hidden',
    },
    touchButtonText: {
        color: 'white',
        textAlign: 'center',
    }
});

AppRegistry.registerComponent('ButtonView', ()=> ButtonView);
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值