更新 metro-config.js React Native

Question

我根据文档安装了react-native-svg并更新了 metro-config.js：

metro-config.js
...
const { getDefaultConfig } = require('metro-config');

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-tcp-socket并将以下几行添加到 metro-config.js 中：

const {getDefaultConfig} = require('metro-config');
const defaultConfig = getDefaultConfig.getDefaultValues(__dirname);

module.exports = {
  resolver: {
    assetExts: [...defaultConfig.resolver.assetExts, 'pem'],
  },
  // ...
};

但我不知道如何将它们结合在一起。 我尝试了以下方法：

resolver: {
  assetExts: assetExts.filter(ext => ext !== "svg") + [...defaultConfig.resolver.assetExts, 'pem'],
  sourceExts: [...sourceExts, "svg"],
},

但它没有按预期工作。 有任何想法吗？

Answer 1

像这样替换解析器部分：

resolver: {
  assetExts: [...assetExts.filter(ext => ext !== "svg"), 'pem'],
  sourceExts: [...sourceExts, "svg"],
}

为什么？ 您不需要defaultConfig.resolver.assetExts ，因为assetsExts来自默认配置。 您只是从中取出 svg（ 阅读有关过滤功能的更多信息），因此您只会将'pem'添加到最终配置数组中。