RN提供了好幾種按鈕宣肚，這里介紹最為常用的三種

1：第一種按鈕最原始的Button

常用屬性：

title：按鈕顯示名稱

onPress：按鈕點(diǎn)擊的事件

color：顯示文字的顏色

創(chuàng)建一個Button

<Button title="Button" 
        onPress={this.actionButton} 
             color={'#aaffaa'}/>

2：第二種按鈕TouchableOpacity，點(diǎn)擊按鈕更改按鈕的透明度

常用屬性：

activeOpacity：設(shè)置點(diǎn)擊的透明度0-1

創(chuàng)建一個TouchableOpacity

<TouchableOpacity style={styles.touchButton}
                             onPress={() => {
                                 alert('TouchableOpacity')
                           }}>
                    <Text style={styles.touchButtonText}>點(diǎn)擊按鈕1</Text>
                </TouchableOpacity>

3：第三種按鈕TouchableHighlight，點(diǎn)擊按鈕可以更改按鈕的背景色和透明度

常用屬性：

activeOpacity：設(shè)置點(diǎn)擊的透明度0-1

underlayColor：點(diǎn)擊狀態(tài)的顏色

onHideUnderlay：隱藏點(diǎn)擊狀態(tài)時調(diào)用的方法

onShowUnderlay：顯示點(diǎn)擊狀態(tài)時調(diào)用的方法

創(chuàng)建一個TouchableHighlight

<TouchableHighlight activeOpacity={0.9}
                                    underlayColor={'#1aaf00'}
                                    style={[styles.touchButton]}
                                    onPress={() => {
                    alert('TouchableHighlight')
                }}>
                    <Text style={styles.touchButtonText}>點(diǎn)擊按鈕2</Text>
                </TouchableHighlight>

完整的創(chuàng)建三種按鈕：

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(
            <View style={{
                backgroundColor: '#ffaaaa', 
                flex: 1,
                alignItems: 'center',
                justifyContent: 'center'}}>
                <Button title="Button" 
                        onPress={this.actionButton}
                        color={'#aaffaa'}/>
                <TouchableOpacity style={styles.touchButton} 
                                  onPress={() => {
                    alert('TouchableOpacity')
                }}>
                    <Text style={styles.touchButtonText}>點(diǎn)擊按鈕1</Text>
                </TouchableOpacity>
                <TouchableHighlight activeOpacity={0.9}
                                    underlayColor={'#1aaf00'}
                                    style={[styles.touchButton]}
                                    onPress={() => {
                    alert('TouchableHighlight')
                }}>
                    <Text style={styles.touchButtonText}>點(diǎn)擊按鈕2</Text>
                </TouchableHighlight>
            </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);

效果展示：

Untitled8.gif