ReactNative: 使用按钮组件Button组件

一、简介

按钮组件在开发中最常见不过了，有文字，有事件，使用简单，直接看API。注意此按钮组件无法显示图片，如果需要显示图片，可以使用TouchableOpacity等可触摸组件配合Image组件自定义按钮。

 

二、API

常用的属性和函数如下：

/**
 * Text to display inside the button
 * 按钮文案 
 */
title: React.PropTypes.string.isRequired,

/**
 * Text to display for blindness accessibility features
 * 辅助文案
 */
accessibilityLabel: React.PropTypes.string,

/**
 * Color of the text (iOS), or background color of the button (Android)
 * 按钮文案颜色（iOS），安卓中则是背景颜色
 */
color: ColorPropType,

/**
 * If true, disable all interactions for this component.
 * 是否能交互
 */
disabled: React.PropTypes.bool,

/**
 * Handler to be called when the user taps the button
 * 点击事件
 */
onPress: React.PropTypes.func.isRequired,

/**
 * Used to locate this view in end-to-end tests.
 * 按钮标识，类似于iOS中的tag，便于在view子视图数组中遍历该按钮
 */
testID: React.PropTypes.string,    

 

三、使用

将其作为View的子组件，设置大小背景色，示例如下：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';

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


export default class ReactNativeDemo extends Component {

    render() {
        return (
            <View style={[styles.flex,styles.bgColor,styles.center]}>
                <View style={[styles.center,{width:100, height:100, backgroundColor: 'green'}]}>
                    <Button
                        title={'点击'}
                        accessibilityLabel="accessibility title"
                        color={'red'}
                        disabled={false}
                        testID={'buttonTag'}
                        onPress={() => {console.log('-------')}}
                    />
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    flex: {
        flex: 1
    },
    bgColor: {
      backgroundColor: '#1FB9FF'
    },
    center: {
        alignItems: 'center',
        justifyContent: 'center'
    }
});

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

2019-12-31 16:05:53.921 [info][tid:com.facebook.react.JavaScript] -------