react native Button 使用详解

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>
);
}
}

效果图：



github下载地址