React Native-NativeBase自定义按钮主题初始加载失效问题

1. 变量名重复导致主题未正确传入 #

你在App.js中写的const style = style是自我赋值的错误写法，会直接覆盖原本导入的主题变量，让NativeBaseProvider实际接收的theme变成无效的自引用变量。

• 初次运行时开发环境的缓存机制可能临时保留了主题配置，所以样式正常；
• 重启项目后缓存清空，无效的主题变量生效，自定义默认样式丢失；
• 临时修改variation属性触发组件热重载，此时缓存重新加载了正确的主题配置，样式得以恢复。

2. NativeBase样式计算的缓存/重载机制问题 #

即使修正变量名，部分场景下NativeBase的组件样式计算仍可能存在缓存异常：

• 重启项目后，组件没有重新读取最新的主题配置，而是沿用旧的缓存样式；
• 修改组件属性（比如临时添加variation）会强制组件重新计算样式，此时才会正确读取自定义主题里的默认配置。

3. 主题配置层级优先级问题 #

你的defaultProps中直接定义了_text样式，虽然NativeBase允许这种写法，但部分版本中_text属于组件的基础样式属性，更规范的写法是将文本样式移到baseStyle中，避免样式优先级冲突：

export const customTheme = extendTheme({
    components:{
      Button: {
        baseStyle: {
          rounded: 'lg',
          _text: {
            color: 'white',
            fontSize: '30px',
            ...fonts.h1,
            margin: -2,
          }
        },
        defaultProps: {
          size: 'sm',
          colorScheme: 'green',
        },
      }
    }
})

1. 修正App.js的变量名错误，确保主题正确传入：

// 示例：从主题文件导入正确的变量
import { customTheme } from './your-theme-file-path';

return (
 <NativeBaseProvider theme={customTheme}>
  <NavigationContainer>
   <StackNavigator>
    ...
   </StackNavigator>
  </NavigationContainer>
 </NativeBaseProvider>
)

2. 调整主题配置层级，将_text移至baseStyle中（可选，可规避优先级问题）；
3. 若问题仍存在，尝试清除开发环境缓存（如React Native执行npx react-native start --reset-cache）。

内容的提问来源于stack exchange，提问作者guyman