React Native Elements自定义主题组件样式不生效问题求助

你的问题出在主题配置的结构不符合RNE v4的规范，v4版本对组件主题的配置方式做了调整，需要将组件的样式属性嵌套在props字段中。

修正后的主题配置 #

const theme = createTheme({
  components: {
    Text: {
      // 关键：把组件的默认props放在这里
      props: {
        h1Style: {
          color: '#d20eb8',
        },
        style: {
          backgroundColor: 'green',
          fontSize: 28,
          color: 'orange',
        },
      },
    },
  },
  lightColors: {
    primary: '#208bbb',
    success: '#20bb5e',
    grey0: '#2D2D2D',
  },
  darkColors: {
    primary: '#6b056e',
    success: '#086e31',
    grey0: '#c0c0c0',
  },
  mode: 'light',
});

原因说明 #

RNE从v4开始，组件的主题配置采用了props嵌套的结构，用来统一管理组件的默认属性。直接在组件对象下定义style、h1Style这类属性，框架无法识别并应用到组件上，而颜色配置因为是在顶层的lightColors/darkColors中，所以能正常生效。

另外需要确认你的Text组件是从@rneui/themed导入的，而不是React Native原生的：

import { Text } from '@rneui/themed';

这样修改后，你的自定义样式就能覆盖默认样式了。

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