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

Button

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

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

tsx
<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