react-native-elements 4.0.0-rc自定义主题未应用到组件如何解决

创建自定义主题传入ThemeProvider后，主题未生效到react-native-elements组件，当前使用版本为4.0.0-rc。预期Button组件显示自定义的红色主色背景，实际显示默认蓝色；手动给组件传入theme属性可正常生效，需要实现无需手动给每个组件传参、自定义主题默认应用到所有组件的配置方案。

相关实现代码 #

自定义主题 #

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

export const theme = createTheme({
  lightColors: {
    primary: 'red',
    background: '#fff',
    platform: {
      web: {
        primary: 'red',
      },
    },
  },
  darkColors: {
    primary: 'red',
    background: '#000',
    platform: {
      web: {
        primary: 'red',
      },
    },
  },
  mode: 'light',
});

App.tsx #

import { ThemeProvider } from '@rneui/themed';
import { registerRootComponent } from 'expo';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import Root from './Root';
import { theme } from './themed';

function App() {
  return (
    <SafeAreaProvider>
      <ThemeProvider theme={theme}>
        <Root />
      </ThemeProvider>
    </SafeAreaProvider>
  );
}

export default registerRootComponent(App);

Root.tsx（未生效版本） #

import { Button } from '@rneui/base';
import { useTheme, useThemeMode } from '@rneui/themed';
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';

export default function Root() {
  const { theme } = useTheme();
  const { mode, setMode } = useThemeMode();

  return (
    <SafeAreaView style={styles.container}>
      <Text>Hello world!</Text>
      <Button
        color="primary"
        title={'Click me'}
        size="md"
        radius={'md'}
        onPress={() => setMode(mode === 'dark' ? 'light' : 'dark')}
      />
      <StatusBar style="auto" />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    marginTop: 10,
  },
});

手动给Button传入theme={theme}属性后样式可正常生效

问题根源为组件导入路径错误：

• 从@rneui/base导入的是未绑定主题上下文的基础组件，无法自动读取ThemeProvider下发的主题配置
• 只有从@rneui/themed导入的组件，才会自动接入主题体系，默认应用自定义主题

修改Root.tsx中的Button导入语句即可修复：

// 错误写法：导入的基础组件不会自动应用主题
// import { Button } from '@rneui/base';
// 正确写法：导入带主题绑定的组件
import { Button } from '@rneui/themed';

修改后无需手动给每个组件传入theme属性，所有从@rneui/themed导入的组件都会自动读取全局主题配置。

补充：@rneui/base仅提供无样式绑定的基础原子组件，日常开发直接使用@rneui/themed导出的组件即可。

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