← 教程库 / React Native 官方文档·卷一 进阶 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 上一篇 第18章 React Native 实战:加速构建阶段的优化策略 下一篇 第20章 React Native 第20章:CheckBox 组件详解 有帮助 收藏 分享 本篇用到的工具 React Native React Native是由Meta开发的跨平台移动应用框架,让开发者使用JavaScript和React构建同时运行在iOS与Android上的原生应用。它通过原生组件渲染UI而非WebView,性能接近原生开发,同时支持热重载大幅提升开发效率。框架拥有庞大的社区生态和丰富的第三方库,适用于需要快速迭代、降低多端维护成本的中大型App项目。 评论 (0) 发布评论