如何将Figma导出的Material dsp.json主题导入React Native Paper

不需要手动逐行复制配置内容，目前没有可以直接把dsp.json传入PaperProvider的原生支持，但可以通过两种低成本方式实现接入，不需要重复手动抄配置：

方法1：通过Material Theme Builder转成React Native Paper原生兼容格式（推荐） #

• 如果你已经从Figma导出了dsp.json，先把这个文件重新导入回Material Theme Builder，在导出选项里不要选dsp格式，直接选React Native Paper导出，就能拿到结构完全匹配的主题配置文件。
• 拿到导出的文件后直接合并到React Native Paper的基础MD3主题里，传给Provider即可，代码示例：

import { MD3LightTheme, MD3DarkTheme, PaperProvider } from 'react-native-paper';
import exportedCustomTheme from './theme/rnp-exported-theme';

// 亮色主题用MD3LightTheme合并，暗色主题用MD3DarkTheme合并即可
const appTheme = {
  ...MD3LightTheme,
  ...exportedCustomTheme,
};

export default function RootApp() {
  return (
    <PaperProvider theme={appTheme}>
      {/* 你的应用其余路由、组件 */}
    </PaperProvider>
  );
}

方法2：写轻量转换脚本直接读取本地dsp.json #

如果你的工作流必须直接消费dsp.json文件，只需要写一次字段映射的转换逻辑，后续dsp更新不需要手动改配置：

• dsp.json本身是Material Design的通用主题交换格式，字段命名和React Native Paper的MD3主题规范完全对齐，只是结构和值的读取方式有差异：dsp里的每个设计token都包了一层value属性，且顶层字段名和RNP主题有小区别（比如dsp里的color对应RNP的colors）
• 转换逻辑示例：

import dspTheme from './design-system/custom-material.dsp.json';
import { MD3LightTheme, configureFonts } from 'react-native-paper';

const parseDspToRnpTheme = (dspFile) => {
  // 取dsp里第一个主题配置即可，多主题可以按需遍历
  const dspContent = dspFile.themes ? Object.values(dspFile.themes)[0] : dspFile;

  return {
    colors: Object.fromEntries(
      Object.entries(dspContent.color).map(([tokenName, tokenConfig]) => [tokenName, tokenConfig.value])
    ),
    fonts: configureFonts({
      config: {
        fontFamily: dspContent.typography.default.family.value,
        // 不同字号、字重的字体规则按需映射即可
      }
    }),
    roundness: dspContent.shape.corner.small.value,
  }
};

const finalTheme = {
  ...MD3LightTheme,
  ...parseDspToRnpTheme(dspTheme),
};

• 后续只要替换dsp.json文件，重新运行项目就能拿到最新的主题配置，不需要手动改任何主题字段。

注意：不要直接把原始dsp.json对象传给theme参数，结构不匹配会导致组件样式渲染出错。

内容的提问来源于stack exchange，提问作者Ahmad El-Bobou