React Native Button

17 Mar 2025 | 阅读 2 分钟

大多数用户通过触摸与移动设备交互。有许多手势组合可以在其上工作，例如点击按钮，缩放地图，滚动列表等。按钮是在其点击时起作用的组件之一。

React Native 按钮是一个基本组件，可以通过点击来工作。它导入 react-native 的 Button 类。

按钮的属性

属性	类型	必需	描述
onPress	功能	是	当用户单击按钮时调用处理程序。
title	string	是	在按钮内部显示文本。
accessibilityLabel	string	否	显示盲人辅助功能的文本。
color	颜色	否	设置 Android 按钮的背景颜色或设置 iOS 文本的颜色。
disabled	bool	否	如果为 true，则禁用此组件的所有交互。
textID	string	否	用于在端到端测试中定位此视图。
hasTVPreferredFocus	bool	否	它首选的 TV 焦点仅适用于 Apple TV。

React Native 按钮示例

在此示例中，我们将处理按钮组件。 React Native 按钮组件导入 react-native 库的 Button 类。它具有几个属性，例如 title，onPress，accessibilityLabel 等，如上所述。

在上一篇文章使用 Flex 定位元素中，我们学习了如何在View中定位元素。

在下面的代码中，title 属性设置按钮的标题，onPress 属性调用提及的函数并执行事件。 color 属性设置按钮的颜色，并且 disabled={true} 使按钮禁用。

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

export default class ButtonBasics extends Component {
    onPressButton() {
        Alert.alert('You clicked the button!')
    }

    render() {
        return (
            <View style={styles.container}>
                <View style={styles.buttonContainer}>
                    <Button
                        onPress={this.onPressButton}
                        title="Press Me"
                    />
                </View>
                <View style={styles.buttonContainer}>
                    <Button
                        onPress={this.onPressButton}
                        title="Press Me"
                        color="#009933"
                    />
                </View>
                <View style={styles.multiButtonContainer}>
                    <Button
                        onPress={this.onPressButton}
                        title="A disabled button"
                        disabled={true}
                    />
                    <Button
                        onPress={this.onPressButton}
                        title="OK!"
                        color="#009933"
                    />
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
    },
    buttonContainer: {
        margin: 20
    },
    multiButtonContainer: {
        margin: 20,
        flexDirection: 'row',
        justifyContent: 'space-between'
    }
})

输出