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

Question

我在React Native应用程序中使用了自定义字体，它非常完美。但我需要在其中添加SVG文件，所以我添加了metro.config.js文件和以下代码。之后我有一个错误：无法识别的字体家族'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'],
},
};
})();

Answer 1

我遇到了完全相同的问题，并找到了修复方法。我的猜测是，在合并(在这种情况下可能不会合并(从react-native-svg-transformer编写的metro配置和从expo编写的默认配置时会出现问题。

无论如何，在阅读了关于定制metro配置的expo文档页面后，我刚刚更改了metro配置包的默认配置

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'],
},
};

享受吧！

Answer 2

尝试将getDefaultConfig的源文件从metro-config更改为@expo/metro-config。对我来说效果很好。

参考：世博文件