Button-按鈕仁期，平時(shí)開(kāi)發(fā)中再熟悉不過(guò)的東西了差凹，為什么單獨(dú)一篇來(lái)學(xué)少漆，因?yàn)樵谖乙酝拈_(kāi)發(fā)經(jīng)驗(yàn)當(dāng)中某些看似簡(jiǎn)單的東西實(shí)際應(yīng)用起來(lái)并不簡(jiǎn)單尸疆，要完成某一種效果需要很多方面的知識(shí)椿猎。今天就來(lái)學(xué)習(xí)一下React Native中的button。
普通樣式的Button
首先來(lái)看Button組件的屬性：
accessibilityLabel: ?string
設(shè)置輔助功能是需要顯示的文字寿弱。
color: ?string
這里有個(gè)區(qū)別犯眠，在Android設(shè)備上設(shè)置的是Button背景的顏色，在Ios設(shè)備上設(shè)置的是Button上文字的顏色症革。
disabled: ?boolean
設(shè)置Button是否可以點(diǎn)擊筐咧。
onPress: () => any
設(shè)置Button的點(diǎn)擊事件。
testID: ?string
設(shè)置Button的id，用于控件查找量蕊，類似于我們Android中的android:id铺罢。
title: ?string
設(shè)置Button上顯示的文字。
在React-Native中Button只有以上6種屬性残炮，使用起來(lái)還是非常簡(jiǎn)單的韭赘。但是你有沒(méi)有注意Button并沒(méi)有style屬性，也就是說(shuō)势就，不能通過(guò)style調(diào)整button的大小和布局泉瞻，怎么辦呢？很簡(jiǎn)單View組件是有style的吧苞冯，我們讓Button的父組件是一個(gè)View就OK了袖牙。
下面來(lái)看具體使用方法：
首先 import中需要引入button組件
import React,{Component} from 'react';
import{
AppRegistry,
StyleSheet,
Button
}from 'react-native';
聲明一個(gè)點(diǎn)擊按鈕的事件，比如彈出一個(gè)Dialog舅锄，別忘了還需要在import中添加Alert組件鞭达；
import{
AppRegistry,
StyleSheet,
Alert,
Button
}from 'react-native';
const onButtonPress = () => {
Alert.alert('點(diǎn)擊了Button按鈕');
};
暫時(shí)看不懂沒(méi)關(guān)系，以后會(huì)具體學(xué)習(xí)的皇忿，現(xiàn)在只要知道這段代碼會(huì)彈出一個(gè)Dialog就行了畴蹭。然后就是在render中渲染就行了：
class HelloWorld extends Component{
render(){
return(
<Button
title="我是按鈕"
onPress={onButtonPress}
color="#841584">
</Button>
);
}
}
運(yùn)行結(jié)果：
點(diǎn)擊按鈕彈出一個(gè)Dialog
頂邊太難看，現(xiàn)在給Button加一個(gè)16pd的外邊距
<View style={{margin:16}}>
<Button
title="我是按鈕"
onPress={onButtonPress}
color="#841584">
</Button>
</View>
注意看我們是在Button外層添加了一個(gè)View組件禁添，并且設(shè)置了View的margin屬性值為16（這里說(shuō)一句撮胧，react native 中設(shè)置的margin, padding ,width,height等等這些屬性值單位都是dp桨踪，Android的小伙伴看到應(yīng)該會(huì)很高興吧）老翘，顯示效果如下：
邊距添加成功了。
再來(lái)看一下disable屬性的效果：
<Button
disabled
title="我是按鈕"
onPress={onButtonPress}
color="#841584">
</Button>
注意看锻离，是直接寫disabled即可铺峭，Button默認(rèn)是可點(diǎn)擊的，添加disabled后就是不可點(diǎn)擊狀態(tài)汽纠，效果如下:
按鈕背景自動(dòng)變成了灰色卫键，并且點(diǎn)擊按鈕也沒(méi)有了任何響應(yīng)。
testID這里先不講解虱朵，因?yàn)檫€涉及到其他新的東西莉炉，等以后學(xué)習(xí)完了其他組件到了具體實(shí)戰(zhàn)階段會(huì)在詳細(xì)講解。
以上就是Button的用法碴犬，下面繼續(xù)學(xué)習(xí)如何自定義Button絮宁，因?yàn)樵趯?shí)際開(kāi)發(fā)中自定義button總是不可缺少的，對(duì)不服协。
自定義Button
對(duì)于自定義Button官方給我提供了兩種方式绍昂，分別是TouchableOpacity和TouchableNativeFeedback(Android平臺(tái)專用)。
首先來(lái)看TouchableOpacity，我們要實(shí)現(xiàn)的最終效果如下:
代碼如下:
class ImageButton extends Component{
render(){
return(
<TouchableOpacity onPress={onButtonPress} activeOpacity={0.2} focusedOpacity={0.5}>
<View style= {{justifyContent:'center',alignItems:'center',width:128,height:128,backgroundColor:'#841584'}}>
<Image source={require('./image/ic_search.png')}>
</Image>
<Text style={{color:'#ffffff'}}>ImageButton</Text>
</View>
</TouchableOpacity>
);
}
}
TouchableOpacity組件中使用了三個(gè)屬性窘游，具體含義：
onPress 指定點(diǎn)擊事件唠椭；
activeOpacity 正常狀態(tài)下的透明度；
focusedOpacity 點(diǎn)擊狀態(tài)下的透明度忍饰；
TouchableOpacity組件的子組件是一個(gè)View贪嫂，里邊又包含了一個(gè)Image和Text，最終構(gòu)成了我們自定義的ImageButton屬性艾蓝。
TouchableNativeFeedback其實(shí)和TouchableOpacity使用方式差不多撩荣，只不過(guò)屬性不太一樣，這里就不多說(shuō)了饶深。
掌握了TouchableOpacity和TouchableNativeFeedback餐曹，各位小伙伴就可以開(kāi)心的定制各種各樣的button了，so easy敌厘！
下面還有一個(gè)重頭戲台猴，感謝我們偉大的開(kāi)源社區(qū)，為我們提供了各種各樣的精美組件：
下面是幾個(gè)Button樣式的截圖：
還有好多好多俱两，就不一一列舉了饱狂，每種樣式的使用方式，如何引入宪彩，官網(wǎng)已經(jīng)做了具體說(shuō)明休讳，最后奉上地址：https://js.coach/react-native/react-native-swipeout?search=button&filters=android
Button暫時(shí)就到這里吧，歡迎大家繼續(xù)關(guān)注尿孔，一同學(xué)習(xí)React Native的其他組件俊柔。
