在 React Native 中添加 metro.config.js 后自定义字体出现问题答案

【问题标题】：Problem with custom fonts after adding metro.config.js in React Native在 React Native 中添加 metro.config.js 后自定义字体出现问题
【发布时间】：2020-12-21 20:22:15
【问题描述】：

我在我的 React Native 应用程序中使用自定义字体，它非常完美。但我需要在其中添加 SVG 文件，所以我添加了 metro.config.js 文件和以下代码。之后我有一个错误：Unrecognized font family 'NunitoSemiBold' 有人知道这个文件 metro.config.js 如何与自定义字体发生冲突吗？

 
module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts },
  } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve('react-native-svg-transformer'),
    },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== 'svg'),
      sourceExts: [...sourceExts, 'svg'],
    },
  };
})();

【问题讨论】：

标签： react-native svg custom-font

【解决方案1】：

我遇到了完全相同的问题，我找到了解决方法。我的猜测是，在合并（在这种情况下可能不会合并）从react-native-svg-transformer 编写的 Metro-config 和来自 expo 的默认配置时存在问题。

反正看了expo doc page regarding customizing the metro config之后，我只是把metro config包的默认配置改了

yarn add -D @expo/metro-config

然后我更新metro.config.js:

const { getDefaultConfig } = require('@expo/metro-config');

const {
    resolver: { sourceExts, assetExts },
} = getDefaultConfig(__dirname);

module.exports = {
    transformer: {
        babelTransformerPath: require.resolve('react-native-svg-transformer'),
    },
    resolver: {
        assetExts: assetExts.filter((ext) => ext !== 'svg'),
        sourceExts: [...sourceExts, 'svg'],
    },
};

享受吧！

【讨论】：

太棒了！非常简单实用！非常感谢！

【解决方案2】：

尝试将 getDefaultConfig 的源文件从 metro-config 更改为 @expo/metro-config。很适合我。

参考：Expo doc

【讨论】：