React Native Elements Button 组件完全指南从基础用法到源码级 Props 详解v4.0.0-beta.0【免费下载链接】react-native-elementsCross-Platform React Native UI Toolkit项目地址: https://gitcode.com/gh_mirrors/re/react-native-elementsButton 是 React Native ElementsRNE中最核心的交互组件之一它是用于与屏幕交互、执行某个操作的可触摸元素touchable element可以只显示文本、只显示图标也可以两者兼有并通过大量 props 灵活定制外观与行为。本文将基于仓库website/versioned_docs/version-4.0.0-beta.0/main/Button.md的官方文档骨架结合packages/base/src/Button/的真实源码实现、用法示例与单元测试系统讲解 Button 的全部 19 个官方 Props、4 种按钮变体solid / outline / clear、图标定位、加载与禁用状态、渐变背景、主题化机制等帮助你在实际项目中把按钮用到极致。一、Button 是什么定位与平台触摸行为按官方文档的定义Button 是可触摸元素touchable elements用于与屏幕交互并执行操作perform an operation。它可以显示文本、图标或两者同时显示可以通过多种 props 调整外观。同时Button 接收所有原生触摸组件的 Props在 Android 上对应TouchableNativeFeedback的 Props在 iOS 上对应TouchableOpacity的 Props。需要说明的是这是 v4.0.0-beta.0 文档的描述从当前仓库源码看基础实现默认使用 React Native 的Pressable作为触摸组件见 Button.tsx 中const TouchableComponentInternal TouchableComponent || Pressable;并可通过TouchableComponentprop 替换为任意自定义触摸组件。这意味着onPress、onLongPress、delayLongPress等PressableProps均可直接透传使用。二、快速上手三种按钮变体type官方用法文档 Button.usage.tsx 明确了按钮有三种类型typesolid默认实心背景按钮标题为白色outline描边按钮透明背景 主题色边框与标题clear无背景无边框的纯文字按钮。Button titleSolid / Button titleOutline typeoutline / Button titleClear typeclear /从源码看type默认值为solidButton.tsx。三种类型在样式计算上的差异体现在 Button.tsx背景色type solid时取theme.colors[color]如primary否则为transparent边框仅type outline时设置borderWidth: StyleSheet.hairlineWidth一像素细线边框色为主题primary标题色solid为white其余为主题primary。仓库基础测试 Button.test.tsx 对三种 type 分别做了快照、raised 与 disabled 组合测试可作为回归保障。三、尺寸、圆角与颜色v4 新增增强虽然 v4.0.0-beta.0 文档的 Props 表未收录以下属性但当前仓库源码Button.tsx已实现属文档骨架的自然延伸值得一并掌握sizesm | md | lg默认md。它决定按钮内边距源码使用theme.spacing[size]作为padding、theme.spacing[size] theme.spacing.xs作为paddingHorizontalButton.tsx。主题默认间距为xs: 2, sm: 4, md: 8, lg: 12, xl: 24见 helpers/index.tsx。radius圆角number | xs | sm | md | lg | xl等对应ThemeSpacing键默认xs。源码通过theme.spacing[radius] ?? radius计算数值并应用到容器与按钮圆角Button.tsx。color按钮颜色string | primary | secondary | success | warning | error默认primary。会优先匹配主题色板colors.ts 中默认primary: #2089dc、secondary: #ad1457、success: #52c41a、error: #ff190c、warning: #faad14找不到时回退为传入的字符串颜色。Button sizesmSmall/Button Button sizemdMedium/Button Button sizelgLarge/Button ButtonPrimary/Button Button colorsecondarySecondary/Button Button colorwarningWarning/Button Button colorerrorError/Button Button uppercaseUppercase/Button Button radiusxlRounded/Button示例应用 buttons.tsx 中可看到上述用法的完整可运行版本。四、图标按钮icon、iconPosition、iconRight、iconContainerStyle官方文档说明icon在无标题时显示为居中图标有文本时显示在标题左侧可以配合iconRight使用其值可以是对象或自定义组件。在 TypeScript 层面icon类型为IconNodeButton.tsx渲染时通过renderNode(Icon, icon, ...)交给 RNE 的Icon组件处理Button.tsx。三个相关 PropsProp说明类型默认值icon图标可为对象如{ name: home, type: font-awesome }或自定义组件anyNoneiconPosition图标方位left \| right \| top \| bottom需与icon配合stringlefticonRight布尔值为true时图标显示在标题右侧效果等同iconPositionright需与icon配合booleanfalseiconContainerStyle图标容器外层 View的样式View styleNone图标方位的底层实现非常直观源码维护了一张位置 → flexDirection 的映射表Button.tsxtop - column bottom - column-reverse left - row right - row-reverse并且iconRight优先级更高flexDirection: positionStyle[iconRight ? right : iconPosition]Button.tsx。图标容器默认marginHorizontal: 5可通过iconContainerStyle覆盖如示例中的marginLeft: 10、marginRight: -10。实战示例来自 buttons.tsxButton titlePROFILE icon{{ name: user, type: font-awesome, size: 15, color: white }} iconRight iconContainerStyle{{ marginLeft: 10 }} titleStyle{{ fontWeight: 700 }} buttonStyle{{ backgroundColor: rgba(199, 43, 98, 1) }} radius{30} /注意在loading为true时图标与标题都会被隐藏仅显示加载指示器见下文。五、加载状态loading、loadingProps、loadingStyleloading为true时显示加载 spinnerActivityIndicator。三个相关 PropsProp说明类型默认值loading是否显示加载指示器booleanfalseloadingProps透传给ActivityIndicator的额外 PropsActivityIndicatorPropsNoneloadingStyle加载指示器外层容器的额外样式View styleNone源码中defaultLoadingPropsButton.tsx给出的默认配置是color: type solid ? white : theme.colors.primarysize: small。也就是说solid 按钮的 spinner 为白色、outline/clear 按钮的 spinner 为主题色你可以通过loadingProps覆盖颜色与尺寸Button titleSIGN UP loading{true} loadingProps{{ size: small, color: rgba(111, 202, 186, 1) }} buttonStyle{{ backgroundColor: rgba(92, 99,216, 1) }} /关键交互细节加载期间不仅视觉上隐藏标题与图标Button.tsx点击事件也会被拦截——handleOnPress在loading或disabled为真时不调用onPressButton.tsx。这一点由测试 Button.test.tsx 明确验证should be NOT call onPress events while loading。六、禁用状态disabled、disabledStyle、disabledTitleStyleProp说明类型默认值disabled为true时禁用该组件的所有用户交互booleanfalsedisabledStyle禁用状态下按钮View的样式View styleNonedisabledTitleStyle禁用状态下标题Text的样式Text styleNone禁用态的表现会随 type 变化Button.tsxsolid背景色切换为theme.colors.disabled默认hsl(208, 8%, 90%)见 colors.tsoutline边框色切换为禁用色darken(0.3)后的颜色clear仅标题变色标题文字统一使用color(theme.colors.disabled).darken(0.3)Button.tsx也可用disabledTitleStyle覆盖。disabledStyle可完全接管禁用态外观。测试 Button.test.tsx 展示了用disableddisabledStyle做灰色态、切换状态后恢复buttonStyle蓝色背景的完整用例。七、凸起效果raisedraised为按钮添加凸起阴影/浮起样式可选官方文档特别强调typeclear时该属性不生效。Prop说明类型默认值raised添加凸起样式typeclear时无效booleanfalse其样式按平台区分Button.tsxAndroid 使用elevation: 4iOS 使用shadowColor: rgba(0,0,0, .4)、shadowOffset: { height: 1, width: 1 }、shadowOpacity: 1、shadowRadius: 1同时overflow: visible。触发条件为raised !disabled type ! clearButton.tsx。Button titleRaised Button typeoutline raised /八、渐变背景linearGradientProps ViewComponentlinearGradientProps用于显示线性渐变背景。它本身只是任意对象真正渲染渐变的是通过ViewComponent传入的外部组件如expo-linear-gradient、react-native-linear-gradient渐变 Props 会原样展开到该组件上ViewComponent {...linearGradientProps} style{...} /见 Button.tsx。import { LinearGradient } from expo-linear-gradient; Button titleLinear Gradient ViewComponent{LinearGradient} linearGradientProps{{ colors: [#FF9800, #F44336], start: { x: 0, y: 0.5 }, end: { x: 1, y: 0.5 }, }} /重要前提与限制使用前必须安装外部线性渐变库因为 RNE 自身不内置该依赖Button.usage.tsx 注明 Requires an external library like expo-linear-gradient若设置了linearGradientProps但未传ViewComponent控制台会打印警告You need to pass a ViewComponent to use linearGradientProps!Button.tsxAndroid 上使用渐变时不会生成水波纹ripple效果见下节源码细节ViewComponent同样可用于完全自定义的容器组件它会接收linearGradientProps作为标准 propsButton.usage.tsx 演示了自定义CustomBox实现虚线边框背景的用法。九、样式体系buttonStyle / containerStyle / titleStyle / titlePropsProp说明类型默认值buttonStyle按钮本体内层 View的附加样式View style(Object)NonecontainerStyle组件容器外层 View的样式View style(Object)NonetitleStyle标题Text的附加样式Text style(Object)NonetitleProps透传给标题 Text 组件的额外 PropsTextPropsNoneViewComponent容器组件默认ViewReact ComponentNone结构上Button 由两层 View 一个触摸组件构成最外层是容器View style{[styles.container, { borderRadius }, containerStyle, raised styles.raised]}内层是ViewComponent渲染的按钮体合并styles.button、type 相关样式与buttonStyle触摸组件Pressable包裹在中间Button.tsx。containerStyle常用来控制宽度与外部间距如示例中的width: 200, marginHorizontal: 50, marginVertical: 10buttonStyle控制内部背景、边框、内边距等标题默认样式styles.title为fontSize: 16Android 使用sans-serif-medium其他平台 18、textAlign: centerButton.tsx通过titleStyle覆盖例如fontWeight: boldtitle类型为any默认空字符串同时支持传入React 元素如自定义的CustomTitle /见 buttons.tsx并可通过children直接书写标题内容——源码中children titleButton.tsx字符串子节点会被渲染为 Text、非字符串子节点如Icon /原样保留Button.tsx。十、Props 完整参考表来自官方文档以下完整罗列 v4.0.0-beta.0 文档 Button.md 中定义的 Button 全部 PropsProp说明类型默认值TouchableComponent用于用户交互的组件anyNoneViewComponent容器组件React ComponentNonebuttonStyle按钮本体的附加样式View style(Object)NonecontainerStyle组件容器的样式View style(Object)Nonedisabled为 true 时禁用所有用户交互booleanfalsedisabledStyle禁用时按钮的样式View style(Object)NonedisabledTitleStyle禁用时标题的样式Text style(Object)Noneicon显示图标无标题时居中、有文本时在左可配合 iconRight可为对象或自定义组件anyNoneiconContainerStyle图标容器样式View style(Object)NoneiconPosition图标方位left/right/top/bottom需配合icon使用stringlefticonRight图标显示在标题右侧需配合icon使用booleanfalselinearGradientProps显示线性渐变见渐变章节objectNoneloading显示加载 spinnerbooleanfalseloadingPropsActivityIndicator 的附加 PropsActivityIndicatorPropsNoneloadingStyle加载组件的附加样式View style(Object)Noneraised凸起样式typeclear时无效booleanfalsetitle按钮标题any空titlePropsText 组件的附加 PropsTextPropsNonetitleStyle标题的附加样式Text style(Object)Nonetype按钮类型solid/clear/outlinestringsolid此外源码还额外支持uppercase标题全大写、radius、size、color、onPress等PressableProps详见上文第三章节。十一、源码级细节主题、无障碍与水波纹深入 Button.tsx还能发现几个文档之外但影响实际体验的实现要点主题化themed 包rneui/themed中的 Button 由withThemeButtonProps(Button, Button)包裹themed/src/Button/index.tsx因此可以在全局主题的components.Button中注入默认 Props例如统一设置loading: true或默认标题主题测试 Button.test.tsx 验证了从主题注入loading与title的生效过程。Android 水波纹ripple非 Android、使用渐变或禁用状态下不产生 ripple否则根据标题颜色生成alpha(0.32)的 ripple 颜色并设置borderless: false, foreground: trueButton.tsx。若颜色解析失败则回退到rgba(0,0,0,0.1)。无障碍与测试标识组件声明accessibilityRolebutton并通过accessibilityState暴露disabled与busyloading 状态两个状态Button.tsx外层容器testIDRNE_BUTTON_WRAPPER、触摸层testIDRNE_BUTTON_PRESSABLEButton.tsx单元测试正是借助这些 testID 完成断言。按压反馈Android 使用系统 ripple其他平台在按压时对触摸层设置opacity: 0.3Button.tsx。十二、完整实战示例把上述能力组合起来一个信息完整的登录按钮可以这样写综合 buttons.tsx 与可运行版 component_usage/Button.mdximport { Button } from rneui/themed; Button titleLOG IN radius{30} buttonStyle{{ backgroundColor: black, borderWidth: 2, borderColor: white, }} containerStyle{{ width: 200, marginHorizontal: 50, marginVertical: 10, }} titleStyle{{ fontWeight: bold }} onPress{() console.log(Login pressed)} / Button titleSubmit loading{false} loadingProps{{ size: small, color: white }} buttonStyle{{ backgroundColor: rgba(111, 202, 186, 1), borderRadius: 5, }} containerStyle{{ marginHorizontal: 50, height: 50, width: 200, marginVertical: 10 }} onPress{() console.log(Submitting...)} / Button titleGradient ViewComponent{LinearGradient} linearGradientProps{{ colors: [#FF9800, #F44336], start: [1, 0], end: [0.2, 0] }} icon{{ name: arrow-right, type: font-awesome, size: 15, color: white }} iconRight radius{20} /小结Button 组件在 React Native Elements 中承担了用户交互入口的核心职责从最简单的solid实心按钮到outline/clear变体再到图标、加载、禁用、凸起、渐变与主题化组合均有对应 Props 与底层实现支撑。本文覆盖了官方文档 Button.md 的全部 Props 定义并结合 Button.tsx 的源码、Button.usage.tsx 的用法示例、Button.test.tsx 的测试用例以及 buttons.tsx 的完整演示从实践到原理完整还原了该组件的使用与工作机制。【免费下载链接】react-native-elementsCross-Platform React Native UI Toolkit项目地址: https://gitcode.com/gh_mirrors/re/react-native-elements创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
React Native Elements Button 组件完全指南从基础用法到源码级 Props 详解v4.0.0-beta.0【免费下载链接】react-native-elementsCross-Platform React Native UI Toolkit项目地址: https://gitcode.com/gh_mirrors/re/react-native-elementsButton 是 React Native ElementsRNE中最核心的交互组件之一它是用于与屏幕交互、执行某个操作的可触摸元素touchable element可以只显示文本、只显示图标也可以两者兼有并通过大量 props 灵活定制外观与行为。本文将基于仓库website/versioned_docs/version-4.0.0-beta.0/main/Button.md的官方文档骨架结合packages/base/src/Button/的真实源码实现、用法示例与单元测试系统讲解 Button 的全部 19 个官方 Props、4 种按钮变体solid / outline / clear、图标定位、加载与禁用状态、渐变背景、主题化机制等帮助你在实际项目中把按钮用到极致。一、Button 是什么定位与平台触摸行为按官方文档的定义Button 是可触摸元素touchable elements用于与屏幕交互并执行操作perform an operation。它可以显示文本、图标或两者同时显示可以通过多种 props 调整外观。同时Button 接收所有原生触摸组件的 Props在 Android 上对应TouchableNativeFeedback的 Props在 iOS 上对应TouchableOpacity的 Props。需要说明的是这是 v4.0.0-beta.0 文档的描述从当前仓库源码看基础实现默认使用 React Native 的Pressable作为触摸组件见 Button.tsx 中const TouchableComponentInternal TouchableComponent || Pressable;并可通过TouchableComponentprop 替换为任意自定义触摸组件。这意味着onPress、onLongPress、delayLongPress等PressableProps均可直接透传使用。二、快速上手三种按钮变体type官方用法文档 Button.usage.tsx 明确了按钮有三种类型typesolid默认实心背景按钮标题为白色outline描边按钮透明背景 主题色边框与标题clear无背景无边框的纯文字按钮。Button titleSolid / Button titleOutline typeoutline / Button titleClear typeclear /从源码看type默认值为solidButton.tsx。三种类型在样式计算上的差异体现在 Button.tsx背景色type solid时取theme.colors[color]如primary否则为transparent边框仅type outline时设置borderWidth: StyleSheet.hairlineWidth一像素细线边框色为主题primary标题色solid为white其余为主题primary。仓库基础测试 Button.test.tsx 对三种 type 分别做了快照、raised 与 disabled 组合测试可作为回归保障。三、尺寸、圆角与颜色v4 新增增强虽然 v4.0.0-beta.0 文档的 Props 表未收录以下属性但当前仓库源码Button.tsx已实现属文档骨架的自然延伸值得一并掌握sizesm | md | lg默认md。它决定按钮内边距源码使用theme.spacing[size]作为padding、theme.spacing[size] theme.spacing.xs作为paddingHorizontalButton.tsx。主题默认间距为xs: 2, sm: 4, md: 8, lg: 12, xl: 24见 helpers/index.tsx。radius圆角number | xs | sm | md | lg | xl等对应ThemeSpacing键默认xs。源码通过theme.spacing[radius] ?? radius计算数值并应用到容器与按钮圆角Button.tsx。color按钮颜色string | primary | secondary | success | warning | error默认primary。会优先匹配主题色板colors.ts 中默认primary: #2089dc、secondary: #ad1457、success: #52c41a、error: #ff190c、warning: #faad14找不到时回退为传入的字符串颜色。Button sizesmSmall/Button Button sizemdMedium/Button Button sizelgLarge/Button ButtonPrimary/Button Button colorsecondarySecondary/Button Button colorwarningWarning/Button Button colorerrorError/Button Button uppercaseUppercase/Button Button radiusxlRounded/Button示例应用 buttons.tsx 中可看到上述用法的完整可运行版本。四、图标按钮icon、iconPosition、iconRight、iconContainerStyle官方文档说明icon在无标题时显示为居中图标有文本时显示在标题左侧可以配合iconRight使用其值可以是对象或自定义组件。在 TypeScript 层面icon类型为IconNodeButton.tsx渲染时通过renderNode(Icon, icon, ...)交给 RNE 的Icon组件处理Button.tsx。三个相关 PropsProp说明类型默认值icon图标可为对象如{ name: home, type: font-awesome }或自定义组件anyNoneiconPosition图标方位left \| right \| top \| bottom需与icon配合stringlefticonRight布尔值为true时图标显示在标题右侧效果等同iconPositionright需与icon配合booleanfalseiconContainerStyle图标容器外层 View的样式View styleNone图标方位的底层实现非常直观源码维护了一张位置 → flexDirection 的映射表Button.tsxtop - column bottom - column-reverse left - row right - row-reverse并且iconRight优先级更高flexDirection: positionStyle[iconRight ? right : iconPosition]Button.tsx。图标容器默认marginHorizontal: 5可通过iconContainerStyle覆盖如示例中的marginLeft: 10、marginRight: -10。实战示例来自 buttons.tsxButton titlePROFILE icon{{ name: user, type: font-awesome, size: 15, color: white }} iconRight iconContainerStyle{{ marginLeft: 10 }} titleStyle{{ fontWeight: 700 }} buttonStyle{{ backgroundColor: rgba(199, 43, 98, 1) }} radius{30} /注意在loading为true时图标与标题都会被隐藏仅显示加载指示器见下文。五、加载状态loading、loadingProps、loadingStyleloading为true时显示加载 spinnerActivityIndicator。三个相关 PropsProp说明类型默认值loading是否显示加载指示器booleanfalseloadingProps透传给ActivityIndicator的额外 PropsActivityIndicatorPropsNoneloadingStyle加载指示器外层容器的额外样式View styleNone源码中defaultLoadingPropsButton.tsx给出的默认配置是color: type solid ? white : theme.colors.primarysize: small。也就是说solid 按钮的 spinner 为白色、outline/clear 按钮的 spinner 为主题色你可以通过loadingProps覆盖颜色与尺寸Button titleSIGN UP loading{true} loadingProps{{ size: small, color: rgba(111, 202, 186, 1) }} buttonStyle{{ backgroundColor: rgba(92, 99,216, 1) }} /关键交互细节加载期间不仅视觉上隐藏标题与图标Button.tsx点击事件也会被拦截——handleOnPress在loading或disabled为真时不调用onPressButton.tsx。这一点由测试 Button.test.tsx 明确验证should be NOT call onPress events while loading。六、禁用状态disabled、disabledStyle、disabledTitleStyleProp说明类型默认值disabled为true时禁用该组件的所有用户交互booleanfalsedisabledStyle禁用状态下按钮View的样式View styleNonedisabledTitleStyle禁用状态下标题Text的样式Text styleNone禁用态的表现会随 type 变化Button.tsxsolid背景色切换为theme.colors.disabled默认hsl(208, 8%, 90%)见 colors.tsoutline边框色切换为禁用色darken(0.3)后的颜色clear仅标题变色标题文字统一使用color(theme.colors.disabled).darken(0.3)Button.tsx也可用disabledTitleStyle覆盖。disabledStyle可完全接管禁用态外观。测试 Button.test.tsx 展示了用disableddisabledStyle做灰色态、切换状态后恢复buttonStyle蓝色背景的完整用例。七、凸起效果raisedraised为按钮添加凸起阴影/浮起样式可选官方文档特别强调typeclear时该属性不生效。Prop说明类型默认值raised添加凸起样式typeclear时无效booleanfalse其样式按平台区分Button.tsxAndroid 使用elevation: 4iOS 使用shadowColor: rgba(0,0,0, .4)、shadowOffset: { height: 1, width: 1 }、shadowOpacity: 1、shadowRadius: 1同时overflow: visible。触发条件为raised !disabled type ! clearButton.tsx。Button titleRaised Button typeoutline raised /八、渐变背景linearGradientProps ViewComponentlinearGradientProps用于显示线性渐变背景。它本身只是任意对象真正渲染渐变的是通过ViewComponent传入的外部组件如expo-linear-gradient、react-native-linear-gradient渐变 Props 会原样展开到该组件上ViewComponent {...linearGradientProps} style{...} /见 Button.tsx。import { LinearGradient } from expo-linear-gradient; Button titleLinear Gradient ViewComponent{LinearGradient} linearGradientProps{{ colors: [#FF9800, #F44336], start: { x: 0, y: 0.5 }, end: { x: 1, y: 0.5 }, }} /重要前提与限制使用前必须安装外部线性渐变库因为 RNE 自身不内置该依赖Button.usage.tsx 注明 Requires an external library like expo-linear-gradient若设置了linearGradientProps但未传ViewComponent控制台会打印警告You need to pass a ViewComponent to use linearGradientProps!Button.tsxAndroid 上使用渐变时不会生成水波纹ripple效果见下节源码细节ViewComponent同样可用于完全自定义的容器组件它会接收linearGradientProps作为标准 propsButton.usage.tsx 演示了自定义CustomBox实现虚线边框背景的用法。九、样式体系buttonStyle / containerStyle / titleStyle / titlePropsProp说明类型默认值buttonStyle按钮本体内层 View的附加样式View style(Object)NonecontainerStyle组件容器外层 View的样式View style(Object)NonetitleStyle标题Text的附加样式Text style(Object)NonetitleProps透传给标题 Text 组件的额外 PropsTextPropsNoneViewComponent容器组件默认ViewReact ComponentNone结构上Button 由两层 View 一个触摸组件构成最外层是容器View style{[styles.container, { borderRadius }, containerStyle, raised styles.raised]}内层是ViewComponent渲染的按钮体合并styles.button、type 相关样式与buttonStyle触摸组件Pressable包裹在中间Button.tsx。containerStyle常用来控制宽度与外部间距如示例中的width: 200, marginHorizontal: 50, marginVertical: 10buttonStyle控制内部背景、边框、内边距等标题默认样式styles.title为fontSize: 16Android 使用sans-serif-medium其他平台 18、textAlign: centerButton.tsx通过titleStyle覆盖例如fontWeight: boldtitle类型为any默认空字符串同时支持传入React 元素如自定义的CustomTitle /见 buttons.tsx并可通过children直接书写标题内容——源码中children titleButton.tsx字符串子节点会被渲染为 Text、非字符串子节点如Icon /原样保留Button.tsx。十、Props 完整参考表来自官方文档以下完整罗列 v4.0.0-beta.0 文档 Button.md 中定义的 Button 全部 PropsProp说明类型默认值TouchableComponent用于用户交互的组件anyNoneViewComponent容器组件React ComponentNonebuttonStyle按钮本体的附加样式View style(Object)NonecontainerStyle组件容器的样式View style(Object)Nonedisabled为 true 时禁用所有用户交互booleanfalsedisabledStyle禁用时按钮的样式View style(Object)NonedisabledTitleStyle禁用时标题的样式Text style(Object)Noneicon显示图标无标题时居中、有文本时在左可配合 iconRight可为对象或自定义组件anyNoneiconContainerStyle图标容器样式View style(Object)NoneiconPosition图标方位left/right/top/bottom需配合icon使用stringlefticonRight图标显示在标题右侧需配合icon使用booleanfalselinearGradientProps显示线性渐变见渐变章节objectNoneloading显示加载 spinnerbooleanfalseloadingPropsActivityIndicator 的附加 PropsActivityIndicatorPropsNoneloadingStyle加载组件的附加样式View style(Object)Noneraised凸起样式typeclear时无效booleanfalsetitle按钮标题any空titlePropsText 组件的附加 PropsTextPropsNonetitleStyle标题的附加样式Text style(Object)Nonetype按钮类型solid/clear/outlinestringsolid此外源码还额外支持uppercase标题全大写、radius、size、color、onPress等PressableProps详见上文第三章节。十一、源码级细节主题、无障碍与水波纹深入 Button.tsx还能发现几个文档之外但影响实际体验的实现要点主题化themed 包rneui/themed中的 Button 由withThemeButtonProps(Button, Button)包裹themed/src/Button/index.tsx因此可以在全局主题的components.Button中注入默认 Props例如统一设置loading: true或默认标题主题测试 Button.test.tsx 验证了从主题注入loading与title的生效过程。Android 水波纹ripple非 Android、使用渐变或禁用状态下不产生 ripple否则根据标题颜色生成alpha(0.32)的 ripple 颜色并设置borderless: false, foreground: trueButton.tsx。若颜色解析失败则回退到rgba(0,0,0,0.1)。无障碍与测试标识组件声明accessibilityRolebutton并通过accessibilityState暴露disabled与busyloading 状态两个状态Button.tsx外层容器testIDRNE_BUTTON_WRAPPER、触摸层testIDRNE_BUTTON_PRESSABLEButton.tsx单元测试正是借助这些 testID 完成断言。按压反馈Android 使用系统 ripple其他平台在按压时对触摸层设置opacity: 0.3Button.tsx。十二、完整实战示例把上述能力组合起来一个信息完整的登录按钮可以这样写综合 buttons.tsx 与可运行版 component_usage/Button.mdximport { Button } from rneui/themed; Button titleLOG IN radius{30} buttonStyle{{ backgroundColor: black, borderWidth: 2, borderColor: white, }} containerStyle{{ width: 200, marginHorizontal: 50, marginVertical: 10, }} titleStyle{{ fontWeight: bold }} onPress{() console.log(Login pressed)} / Button titleSubmit loading{false} loadingProps{{ size: small, color: white }} buttonStyle{{ backgroundColor: rgba(111, 202, 186, 1), borderRadius: 5, }} containerStyle{{ marginHorizontal: 50, height: 50, width: 200, marginVertical: 10 }} onPress{() console.log(Submitting...)} / Button titleGradient ViewComponent{LinearGradient} linearGradientProps{{ colors: [#FF9800, #F44336], start: [1, 0], end: [0.2, 0] }} icon{{ name: arrow-right, type: font-awesome, size: 15, color: white }} iconRight radius{20} /小结Button 组件在 React Native Elements 中承担了用户交互入口的核心职责从最简单的solid实心按钮到outline/clear变体再到图标、加载、禁用、凸起、渐变与主题化组合均有对应 Props 与底层实现支撑。本文覆盖了官方文档 Button.md 的全部 Props 定义并结合 Button.tsx 的源码、Button.usage.tsx 的用法示例、Button.test.tsx 的测试用例以及 buttons.tsx 的完整演示从实践到原理完整还原了该组件的使用与工作机制。【免费下载链接】react-native-elementsCross-Platform React Native UI Toolkit项目地址: https://gitcode.com/gh_mirrors/re/react-native-elements创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
