Native Base自定义Button变体无法修改按钮禁用状态颜色问题

在React Native项目中使用Native Base组件库自定义Button主题变体时，自定义禁用态样式不生效，具体表现：

• 自定义变体函数中打印props.isDisabled返回值为undefined
• 按钮非禁用状态下配置的橙色背景、白色文字正常显示
• 按钮禁用时仅触发组件默认的透明度变化，配置的灰色背景、灰色文字样式未生效

原主题配置、页面使用代码存在逻辑错误和笔误。

1. Native Base v3的变体函数不会直接向样式计算函数透传isDisabled这类顶层状态属性，所有交互态（禁用、按压、聚焦等）的样式都需要通过约定的下划线前缀状态字段（如_disabled、_pressed）定义，组件会自动根据当前状态匹配对应样式，直接读取props.isDisabled无法拿到有效值。
2. Button组件内置的默认禁用态样式优先级高于变体根层级定义的静态样式，即使手动判断状态写了根层级样式，也会被默认的透明度效果覆盖。
3. 原代码存在色值引用错误：自定义主题的colors配置中未定义orange.main色值，仅定义了gold.main，色值读取失败也会导致样式异常。
4. 页面使用代码存在标签笔误：Button闭合标签写为NativeButton，和开标签不匹配。

不需要手动判断isDisabled状态，直接在变体返回的样式对象中通过_disabled字段定义禁用态专属样式即可，该字段下的样式会在组件禁用时自动生效，且优先级足够覆盖组件默认的禁用透明度效果。

修正后的完整主题配置代码：

import { extendTheme } from 'native-base'
import { Dict } from 'native-base/lib/typescript/theme/tools'

const variantLogin = (props: Dict) => {
  return {
    // 非禁用态默认样式
    bg: props.theme.colors.gold.main,
    _text: {
      color: props.theme.colors.white,
    },
    // 禁用态自动匹配的样式
    _disabled: {
      bg: props.theme.colors.gray[200],
      _text: {
        color: props.theme.colors.gray[500],
      },
      // 不需要默认透明效果可加这行，值为1表示完全不透明
      opacity: 1
    }
  }
}

export const theme = extendTheme({
  colors: {
    white: '#ffffff',
    black: '#000000',
    gray: {
      100: '#f5f5f5',
      200: '#d8d8d8',
      300: '#c4c4c4',
      500: '#828282',
      800: '#4b4a4a',
      900: '#1a1a1a',
    },
    gold: {
      main: '#e7c14d',
    },
  },
  components: {
    Button: {
      variants: {
        login: variantLogin
      }
    }
  }
})

export default theme

修正后的页面调用代码：

<Button isDisabled={disabled} variant="login">{text}</Button>

内容的提问来源于stack exchange，提问作者Elena Martín Castillo