进阶 reactnative.dev 2026-10-11 06:04:21 · 31 阅读

第19章 React Native Button 组件详解

版本:0.77 Button 是一个基础按钮组件,在任何平台上都能良好渲染,并支持基本的自定义。 如果该按钮的样式不符合你的应用需求,你可以使用 Pressable 自行构建按钮组件。参考 Button 组件的源代码获取更多灵感。 React TSX onPress={onPressLearnMore}
title="Learn More"
color="#841584"
accessibilityLabel="Learn more about this purple button"
/>

示例

参考

Props

onPress(必填)

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

类型:({nativeEvent: PressEvent})

title(必填)

按钮内显示的文字。在 Android 上,标题会自动转换为大写形式。

类型:string

accessibilityLabel

为无障碍功能(如视障辅助)显示的文本。

类型:string

accessibilityLanguage iOS

指定用户与元素交互时屏幕阅读器使用的语言,需符合 BCP 47 规范。更多信息参见 iOS accessibilityLanguage 文档。

类型:string

accessibilityActions

无障碍操作允许辅助技术以编程方式调用组件的操作。accessibilityActions 属性应包含一个操作对象列表,每个操作对象需包含 name 和 label 字段。更多信息参见无障碍指南。

类型:array,必填:否

onAccessibilityAction

用户执行无障碍操作时调用。函数的唯一参数是一个事件对象,其中包含要执行操作的名称。更多信息参见无障碍指南。

类型:function,必填:否

color

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

类型:color 默认值:Android 为 '#2196F3',iOS 为 '#007AFF'

disabled

若为 true,禁用该组件的所有交互。

类型:bool 默认值:false

hasTVPreferredFocus TV

TV 首选焦点。

类型:bool 默认值:false

nextFocusDown Android TV

指定用户向下导航时下一个获得焦点的视图。参见 Android 官方文档。

类型:number

nextFocusForward Android TV

指定用户向前导航时下一个获得焦点的视图。参见 Android 官方文档。

类型:number

nextFocusLeft Android TV

指定用户向左导航时下一个获得焦点的视图。参见 Android 官方文档。

类型:number

nextFocusRight Android TV

指定用户向右导航时下一个获得焦点的视图。参见 Android 官方文档。

类型:number

nextFocusUp Android TV

指定用户向上导航时下一个获得焦点的视图。参见 Android 官方文档。

类型:number

testID

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

类型:string

touchSoundDisabled Android

若为 true,触摸时不播放系统提示音。

类型:boolean 默认值:false

评论 (0)