react native Button 使用詳解
阿新 • • 發佈:2019-02-13
Button其實就是 Touchable(TouchableNativeFeedback、TouchableOpacity)和Text封裝而來,下面是Button的部分原始碼:
render() {
const {
accessibilityLabel,
color,
onPress,
title,
disabled,
} = this.props;
const buttonStyles = [styles.button];
const textStyles = [styles.text];
const Touchable = Platform.OS === 'android' ? TouchableNativeFeedback : TouchableOpacity;
if (color && Platform.OS === 'ios') {
textStyles.push({color: color});
} else if (color) {
buttonStyles.push({backgroundColor: color});
}
if (disabled) {
buttonStyles.push(styles.buttonDisabled);
textStyles.push(styles.textDisabled);
}
invariant(
typeof title === 'string',
'The title prop of a Button must be a string',
);
const formattedTitle = Platform.OS === 'android' ? title.toUpperCase() : title;
return (
<Touchable
accessibilityComponentType="button"
accessibilityLabel={accessibilityLabel}
accessibilityTraits={['button' ]}
disabled={disabled}
onPress={onPress}>
<View style={buttonStyles}>
<Text style={textStyles}>{formattedTitle}</Text>
</View>
</Touchable>
);
}
由此可見android是TouchableNativeFeedback ,ios是TouchableOpacity,android下title預設大寫。
屬性:
title:Button顯示的文字。
accessibilityLabel:據說這個是用於盲文的,讀屏器軟體可能會讀取這一內容(由於沒有相關裝置未做考證,在這裡也請教下大家。)。
color:ios表示字型的顏色,android表示背景的顏色(莫名其妙啊,不知道為什麼這樣設計)。
disabled:是否可用,如果為true,禁用此元件的所有互動。
onPress:點選觸發函式。
demo:
import React, {Component} from 'react';
import {
StyleSheet,
View,
Button,
ToastAndroid,
} from 'react-native';
export default class ButtonDemo extends Component {
render() {
return (
<View style={{flex:1}}>
<Button title='預設Button' accessibilityLabel='accessibilityLabel'/>
<Button title='color設定為紅色' color='red' />
<Button title='禁用' disabled={true} onPress={()=>{
ToastAndroid.show('點我了');
}}/>
<Button title='禁用' onPress={()=>{
ToastAndroid.show('點我了',ToastAndroid.SHORT);
}}/>
</View>
);
}
}
效果圖: