Button組件簡介

Button組件是一個簡單的跨平臺的按鈕組件。Button組件可以被點擊，點擊之后可以觸發執行特定的動作，并且會有一個漸變的效果反饋給用戶。官方提供的Button組件可以有如下一些樣式，Button組件的樣式在iOS客戶端以及Android客戶端的顯示會有差異。

如果官方提供的Button組件外觀并不符合所需的設計要求，可以使用TouchableOpacity或是TouchableNativeFeedback組件來制作自定義的按鈕，或者也可以在github.com網站上搜索'react native button'來看看社區其他人的作品。

在React Native中，我們可以使用如下的方式創建一個簡單的Button組件。

<Button
  title="99iOS"
  color="red"
/>

Button組件的屬性

Button組件中定義了如下幾個常用的屬性和函數，用于定制Button組件的樣式以及行為。

• title，按鈕內顯示的文本；

• color，在iOS中，用于設置按鈕文本的顏色，在Android中，用于設置按鈕的背景色；

• onPress，用戶點擊按鈕時所調用的處理函數，也就是說，處理按鈕的點擊事件只需要給Button組件的onPress屬性賦值就可以了。例如，下面的代碼中，當點擊按鈕會調用onButtonPress()函數，顯示一個提示框。

onButtonPress() {
    Alert.alert('按鈕被點擊');
  }

<Button
  onPress={this.onButtonPress}
  title="99iOS"
  color="red"
/>

• disabled，設置按鈕是否可以被點擊，當設置為true時按鈕將不能夠被點擊。如下代碼中，按鈕將不能夠被點擊。

<Button 
onPress={this.onButtonPress} 
title="不能點擊的按鈕" 
color="red" 
disabled={true}/>

示例代碼

下方的示例代碼中，演示了如何使用Button組件，包括Button組件的創建、樣式定制以及點擊方法的設置等功能。

• 在終端中執行如下命令，創建ButtonDemo工程；

react-native init ButtonDemo

• 使用Atom打開工程的index.ios.js文件，編寫組件所使用的樣式

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});

• 在一個View組件中，添加三個Button組件，對Button組件的樣式以及點擊行為進行設置。

export default class ButtonDemo extends Component {
  //Button組件點擊后執行的函數
  onButtonPress() {
    Alert.alert('按鈕被點擊');
  }
  //添加三個Button組件
  render() {
    return (
      <View style={styles.container}>
        <Button title="99iOS" color="blue"/>
        <Button onPress={this.onButtonPress} title=" 可以點擊" color="red"/>
        <Button onPress={this.onButtonPress} title=" 不可以點擊 " color="red" disabled={true}/>
      </View>
    );
  }
}

• 使用import加載項目所使用的模塊，并且注冊組件ButtonDemo成為整個應用的根容器。

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

AppRegistry.registerComponent('ButtonDemo', () => ButtonDemo);

• 在終端中執行下面的命令運行程序，在iOS模擬器中可以看到顯示的三個Button組件。

react-native run-ios

• 當點擊按鈕時，會調用onPress()函數，即調用iOS的提醒框控件給用戶展示提示信息。

---