React-Native 自定义按钮系列

RN提供了好几种按钮，这里介绍最为常用的三种

1：第一种按钮最原始的Button

常用属性：

title：按钮显示名称

onPress：按钮点击的事件

color：显示文字的颜色

创建一个Button

2：第二种按钮TouchableOpacity，点击按钮更改按钮的透明度

常用属性：

activeOpacity：设置点击的透明度0-1

创建一个TouchableOpacity

 {
                                 alert('TouchableOpacity')
                           }}>
                    点击按钮1
                

3：第三种按钮TouchableHighlight，点击按钮可以更改按钮的背景色和透明度

常用属性：

activeOpacity：设置点击的透明度0-1

underlayColor：点击状态的颜色

onHideUnderlay：隐藏点击状态时调用的方法

onShowUnderlay：显示点击状态时调用的方法

创建一个TouchableHighlight

 {
                    alert('TouchableHighlight')
                }}>
                    点击按钮2
                

完整的创建三种按钮：

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

export default class ButtonView extends Component {
    render() {
        return(
            
                
                 {
                    alert('TouchableOpacity')
                }}>
                    点击按钮1
                
                 {
                    alert('TouchableHighlight')
                }}>
                    点击按钮2
                
            
        )
    }
    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);

效果展示：

Untitled8.gif