如何为整个应用设置主色调并配置@react-native-material/core主题颜色

1. 为整个应用设置主色调 #

借助@react-native-material/core的主题能力，你可以通过全局配置一次性设置应用主色调，无需逐个组件调整：

• 调用createTheme方法创建自定义主题，在color字段中定义primary（主色调）、secondary（辅助色）等核心颜色值
• 用ThemeProvider组件包裹整个应用根节点，将自定义主题传入，所有子组件会自动继承主题配置

示例代码：

import { ThemeProvider, createTheme } from '@react-native-material/core';

// 自定义全局主题
const appTheme = createTheme({
  color: {
    primary: '#6200EE', // 替换为你的目标主色调
    secondary: '#03DAC6',
  },
});

// 根组件中全局注入主题
export default function App() {
  return (
    <ThemeProvider theme={appTheme}>
      {/* 你的应用页面/组件 */}
    </ThemeProvider>
  );
}

2. 为@react-native-material/core的TextInput统一设置主题颜色 #

同样基于全局主题配置，你可以在自定义主题中针对性修改TextInput的颜色属性，覆盖默认样式：

• 在createTheme的components字段下，指定TextInput的样式规则，设置文本、边框、占位符等颜色参数

示例代码：

const appTheme = createTheme({
  color: {
    primary: '#6200EE', // 全局主色调会关联TextInput的聚焦态颜色
  },
  components: {
    TextInput: {
      style: {
        color: '#333', // 输入文本颜色
        borderColor: '#6200EE', // 默认边框颜色
        placeholderTextColor: '#999', // 占位文本颜色
        focusBorderColor: '#BB86FC', // 聚焦时边框颜色
      },
    },
  },
});

完成配置后，所有@react-native-material/core的TextInput组件都会自动应用这些颜色规则，无需单独为每个组件传参。

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