跳到主要内容
新架构实战课 实操 + 基建 + 原理全维度包揽,抢先掌握 React Native 新架构精髓 立即查看 >Version: Next

Button

一个简单的跨平台的按钮组件。可以进行一些简单的定制。

这个组件的样式是固定的。所以如果它的外观并不怎么搭配你的设计,那你需要使用 Pressable 组件来定制自己所需要的按钮,或者你也可以在 github.com 网站上搜索 'react native button' 来看看社区其他人的作品。

<Button
onPress={onPressLearnMore}
title="Learn More"
color="#841584"
accessibilityLabel="Learn more about this purple button"
/>

示例


文档

Props

必需
onPress

当用户点击按钮时要调用的处理函数。

Type
({nativeEvent: PressEvent})

必需
title

按钮内显示的文本。在安卓中,给定的标题将转换为大写形式。

Type
string

accessibilityLabel

为盲人无障碍访问功能显示的文本。

Type
string

accessibilityLanguage
iOS

一个指示屏幕阅读器在用户与元素交互时应使用哪种语言的值。它应遵循BCP 47规范

有关更多信息,请参阅iOS accessibilityLanguage文档

Type
string

accessibilityActions

无障碍操作允许辅助技术以编程方式调用组件的操作。accessibilityActions属性应包含一个操作对象列表。每个操作对象应包含字段名称和标签。

有关更多信息,请参阅无障碍指南

Type必需
arrayNo

onAccessibilityAction

当用户执行可访问性操作时,将调用此函数。此函数的唯一参数是一个包含要执行的操作名称的事件。

有关更多信息,请参阅可访问性指南

Type必需
functionNo

color

文本的颜色(iOS)或按钮的背景颜色(Android)。

TypeDefault
color '#2196F3'
Android

'#007AFF'
iOS

disabled

如果为 true,则禁用此组件的所有交互。

TypeDefault
boolfalse

hasTVPreferredFocus
TV

TV 平台上的首选焦点。

TypeDefault
boolfalse

nextFocusDown
Android
TV

指定用户向下导航时接收焦点的下一个视图。请参阅 Android 文档.

Type
number

nextFocusForward
Android
TV

指定用户向前导航时接收焦点的下一个视图。请参阅 Android 文档.

Type
number

nextFocusLeft
Android
TV

指定用户向左导航时接收焦点的下一个视图。请参阅 Android 文档.

Type
number

nextFocusRight
Android
TV

指定用户向右导航时接收焦点的下一个视图。请参阅 Android 文档.

Type
number

nextFocusUp
Android
TV

指定用户向上导航时接收焦点的下一个视图。请参阅 Android 文档.

Type
number

testID

用于在端到端测试中定位此视图。

Type
string

touchSoundDisabled
Android

如果为true,则不播放系统声音。

TypeDefault
booleanfalse