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下载地址