React Native v0.74.1 导入 svg 时无法解析模块

Question

我无法在新的 React Native 版本上显示 svg 文件 (

0.74.1

)。我添加了：

react-native-svg-transformer 和 react-native-svg

我按照文档创建了文件

declarations.d.ts

：

declare module '*.png';
declare module '*.svg' {
  import React from 'react';
  import { SvgProps } from 'react-native-svg';

  const content: React.FC<SvgProps>;
  export default content;
}

我还合并了地铁配置：

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');

const {
  createSentryMetroSerializer,
} = require('@sentry/react-native/dist/js/tools/sentryMetroSerializer');

const defaultConfig = getDefaultConfig(__dirname);
const { assetExts, sourceExts } = defaultConfig.resolver;
/**
 * Metro configuration
 * https://reactnative.dev/docs/metro
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = {
  serializer: {
    customSerializer: createSentryMetroSerializer(),
  },
  transformer: {
    babelTransformerPath: require.resolve('react-native-svg-transformer'),
  },
  resolver: {
    assetExts: assetExts.filter(ext => ext !== 'svg'),
    sourceExts: [...sourceExts, 'svg'],
  },
};

module.exports = mergeConfig(defaultConfig, config);

应用程序构建正确，但当我运行它时，出现以下错误：

> 18 | import TwoCars from '../../assets/svg/two_cars.svg';
     |                      ^
  19 | import BarrierGray from '../../assets/svg/barrier-grey.svg';
  20 | import LowEmissions from '../../assets/svg/low-emissions.svg';
  21 | import {
    at ModuleResolver.resolveDependency (/Users/rodrigodiasdefigueiredo/Desktop/myApp/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:112:15)
    at DependencyGraph.resolveDependency (/Users/rodrigodiasdefigueiredo/Desktop/myApp/node_modules/metro/src/node-haste/DependencyGraph.js:231:43)
    at /Users/rodrigodiasdefigueiredo/Desktop/myApp/node_modules/metro/src/lib/transformHelpers.js:156:21
    at resolveDependencies (/Users/rodrigodiasdefigueiredo/Desktop/myApp/node_modules/metro/src/DeltaBundler/buildSubgraph.js:42:25)
    at visit (/Users/rodrigodiasdefigueiredo/Desktop/myApp/node_modules/metro/src/DeltaBundler/buildSubgraph.js:83:30)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Promise.all (index 18)
    at async visit (/Users/rodrigodiasdefigueiredo/Desktop/myApp/node_modules/metro/src/DeltaBundler/buildSubgraph.js:92:5)
    at async Promise.all (index 28)
    at async visit (/Users/rodrigodiasdefigueiredo/Desktop/myApp/node_modules/metro/src/DeltaBundler/buildSubgraph.js:92:5)

我在他们的 GitHub 存储库上打开了一个问题：

https://github.com/kristerkari/react-native-svg-transformer/issues/355

知道如何解决吗？

Answer 1

我已经成功使其工作，您必须更改 tsconfig.file 中的扩展：

替换这个=>“extends”：“@react-native/typescript-config/tsconfig.json”， 对此=>“扩展”：“@tsconfig/react-native/tsconfig.json”，

和你的metro.config.js

`const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');


const defaultConfig = getDefaultConfig(__dirname);
const { assetExts, sourceExts } = defaultConfig.resolver;
/**
 * Metro configuration
 * https://reactnative.dev/docs/metro
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = {
  transformer: {
    babelTransformerPath: require.resolve('react-native-svg-transformer'),
  },
  resolver: {
    assetExts: assetExts.filter(ext => ext !== 'svg'),
    sourceExts: [...sourceExts, 'svg'],
  },
};

module.exports = mergeConfig(defaultConfig, config);
`

希望这对遇到同样问题的人有所帮助！