如何让导入的React组件库获取项目配置（无需逐组件传参）

方案一：React Context 全局注入配置 #

这是最适配React生态的方案，完全匹配你代码里useConfig的思路。

步骤1：组件库中创建Context与Provider #

在组件库根目录新建ConfigContext.js：

import { createContext, useContext } from 'react';

// 定义默认配置，作为兜底值
const defaultConfig = {
  fontNames: {
    regular: 'Arial',
    bold: 'Arial-Bold',
    italic: 'Arial-Italic'
  },
  colors: {
    text: 'black'
    // 可添加其他默认配置项
  }
};

const ConfigContext = createContext(defaultConfig);

// 导出Provider，供业务项目包裹根组件
export const ConfigProvider = ConfigContext.Provider;

// 导出自定义Hook，供组件库内部组件调用
export const useConfig = () => useContext(ConfigContext);

步骤2：更新组件库导出 #

在组件库的index.js中新增导出：

export { ConfigProvider, useConfig } from './ConfigContext';
export { default as AppText } from "./components/AppText.jsx";

步骤3：业务项目注入自定义配置 #

在业务项目的根组件（如App.js）中，用ConfigProvider包裹整个应用，并传入项目专属配置：

import { ConfigProvider } from 'my-component-library';
import AppText from 'my-component-library/AppText';

// 项目自定义配置
const projectConfig = {
  fontNames: {
    regular: 'PingFangSC-Regular',
    bold: 'PingFangSC-Bold',
    italic: 'PingFangSC-Italic'
  },
  colors: {
    text: '#333333'
  }
};

function App() {
  return (
    <ConfigProvider value={projectConfig}>
      {/* 项目内部组件 */}
      <AppText bold>使用自定义字体的文本</AppText>
    </ConfigProvider>
  );
}

export default App;

步骤4：组件库组件使用配置 #

你原有的AppText组件可以直接保留useConfig的写法，现在就能获取到全局注入的配置了：

import { useConfig } from '../ConfigContext';
import { Text, Platform } from 'react-native';

const AppText = ({ children, style, bold, italic, ...textProps }) => {
  const config = useConfig();

  const textStyles = {
    fontSize: Platform.isPad ? 20 : Platform.OS === "ios" ? 15 : 13,
    lineHeight: Platform.isPad ? 24 : Platform.OS === "ios" ? 15 : 13,
    color: config.colors.text,
    fontFamily: config.fontNames[bold ? "bold" : italic ? "italic" : "regular"],
  };

  return (
    <Text selectable {...textProps} style={[textStyles, style]}>
      {children}
    </Text>
  );
};

export default AppText;

方案二：全局配置初始化（非React Context方案） #

如果组件库包含非React组件，或需要支持非React环境，可以用全局变量方式：

步骤1：组件库新增配置管理文件 #

在组件库根目录新建config.js：

// 默认配置
let globalConfig = {
  fontNames: {
    regular: 'Arial',
    bold: 'Arial-Bold',
    italic: 'Arial-Italic'
  },
  colors: {
    text: 'black'
  }
};

// 导出初始化方法，供业务项目调用
export const initConfig = (customConfig) => {
  globalConfig = { ...globalConfig, ...customConfig };
};

// 导出获取配置的方法，供组件使用
export const getConfig = () => globalConfig;

步骤2：组件中使用配置 #

修改AppText组件：

import { getConfig } from '../config';
import { Text, Platform } from 'react-native';

const AppText = ({ children, style, bold, italic, ...textProps }) => {
  const config = getConfig();

  const textStyles = {
    fontSize: Platform.isPad ? 20 : Platform.OS === "ios" ? 15 : 13,
    lineHeight: Platform.isPad ? 24 : Platform.OS === "ios" ? 15 : 13,
    color: config.colors.text,
    fontFamily: config.fontNames[bold ? "bold" : italic ? "italic" : "regular"],
  };

  return (
    <Text selectable {...textProps} style={[textStyles, style]}>
      {children}
    </Text>
  );
};

export default AppText;

步骤3：业务项目初始化配置 #

在项目入口文件（如index.js）中调用初始化方法：

import { initConfig } from 'my-component-library';

initConfig({
  fontNames: {
    regular: 'PingFangSC-Regular',
    bold: 'PingFangSC-Bold',
    italic: 'PingFangSC-Italic'
  },
  colors: {
    text: '#333333'
  }
});

方案三：读取JSON配置文件（不推荐） #

这种方式要求业务项目将配置文件放在固定路径，组件库通过Node.js的fs模块读取，但局限性明显：

• 仅适用于Node.js环境，React Native或浏览器环境无法直接使用fs
• 配置文件路径固定，灵活性差
• 无法动态更新配置

因此更推荐前两种方案，尤其是React Context方案，完全贴合React生态，支持配置动态更新。

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