React Native应用能否适配Material Design？如何获取系统主题色？

核心逻辑说明 #

Android 12及以上系统支持**动态颜色（Dynamic Color）**功能，能基于用户壁纸自动提取生成一套主题色（主色、强调色、文本色等），谷歌系应用的适配就是基于这个系统能力。React Native可以通过第三方库或自定义原生模块来对接该能力，实现应用主题随系统动态变化。

具体实现方案 #

1. 第三方库快速实现（推荐） #

社区维护的react-native-dynamic-colors库已经封装好了Android动态颜色的API，能直接获取系统主题色并监听变化：

• 安装依赖：

npm install react-native-dynamic-colors
# 或使用yarn
yarn add react-native-dynamic-colors

• 基础使用示例：

import DynamicColors from 'react-native-dynamic-colors';

// 获取系统主题色集合
const fetchSystemColors = async () => {
  try {
    const systemColors = await DynamicColors.getDynamicColors();
    // systemColors包含主色、强调色、背景色等全套系统生成色值
    console.log('当前系统主题色：', systemColors);
    // 将主色设置为应用主题色
    setAppPrimaryColor(systemColors.primary);
  } catch (err) {
    // 兼容Android 11及以下版本，降级使用默认色
    setAppPrimaryColor('#6200EE');
  }
};

// 监听主题色变化（用户更换壁纸时自动触发）
DynamicColors.addListener((updatedColors) => {
  setAppPrimaryColor(updatedColors.primary);
});

2. 自定义原生模块（高度定制） #

如果需要更灵活的逻辑控制，可以自己写Android原生模块对接系统API：

• Android原生端（Kotlin）获取动态颜色：

import androidx.core.content.ContextCompat
import com.google.android.material.color.DynamicColors

fun getSystemDynamicColors(context: Context): HashMap<String, String> {
    val colorMap = HashMap<String, String>()
    if (DynamicColors.isDynamicColorAvailable()) {
        // 获取主色
        val primaryColor = ContextCompat.getColor(context, com.google.android.material.R.color.dynamic_color_primary)
        colorMap["primary"] = String.format("#%06X", 0xFFFFFF and primaryColor)
        // 获取强调色
        val accentColor = ContextCompat.getColor(context, com.google.android.material.R.color.dynamic_color_accent)
        colorMap["accent"] = String.format("#%06X", 0xFFFFFF and accentColor)
        // 可扩展获取更多主题色（如背景色、文本色等，参考material库的dynamic_color_*系列资源）
    }
    return colorMap
}

之后将该方法桥接到React Native端，即可在JS层获取颜色值，并通过广播监听系统主题变化。

3. 低版本兼容处理 #

对于Android 11及以下不支持动态颜色的系统，需提前预设一套默认主题色作为降级方案，确保应用在旧设备上的显示一致性。

系统颜色列表说明 #

Android动态颜色系统会生成一套完整的调色板，核心包含：

• 主色（Primary）、主色变体（Primary Variant）
• 次要色（Secondary）、次要色变体（Secondary Variant）
• 背景色（Background）、表面色（Surface）
• 错误色（Error）
• 对应前景色（On Primary、On Secondary、On Background等，用于文本/图标与底色的对比度适配）

通过上述方案获取的颜色集合中会包含这些色值，直接使用即可匹配系统主题风格。

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