React Native 0.71.2版本中react-native-svg无法正常使用求助

问题背景 #

在React Native 0.71.2版本项目中，安装react-native-svg和react-native-svg-transformer后，SVG组件无法正常渲染，已按官方要求配置了metro配置文件，但问题依旧。

项目依赖 #

组件代码示例 #

import React from 'react';
import {View} from 'react-native';
import CustomText from '../../../../component/UI/CustomText';
import Svg, {Circle} from 'react-native-svg';

const OverallPerformance = () => {
  return (
    <View>
      <CustomText>OVerview</CustomText>
      <Svg height="50%" width="50%" viewBox="0 0 100 100">
        <Circle
          cx="50"
          cy="50"
          r="45"
          stroke="blue"
          strokeWidth="2.5"
          fill="green"
        />
      </Svg>
    </View>
  );
};

export default OverallPerformance;

当前metro配置 #

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

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

控制台错误日志 #

解决方案 #

针对React Native 0.71.x版本的适配问题，按以下步骤调整：

1. 锁定兼容版本的react-native-svg
   确保安装的react-native-svg版本与RN 0.71.2匹配，执行以下命令安装兼容版：

   npm install react-native-svg@13.10.0 --save
   # 或使用yarn
   yarn add react-native-svg@13.10.0
   

2. 更新metro配置结构
   RN 0.71.x使用的metro版本对配置结构有要求，修改metro.config.js为：

   const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
   
   module.exports = mergeConfig(getDefaultConfig(__dirname), {
     transformer: {
       babelTransformerPath: require.resolve('react-native-svg-transformer'),
     },
     resolver: {
       assetExts: getDefaultConfig(__dirname).resolver.assetExts.filter(ext => ext !== 'svg'),
       sourceExts: [...getDefaultConfig(__dirname).resolver.sourceExts, 'svg'],
     },
   });
   

3. 添加babel插件（可选）
   若仍存在导入异常，在项目根目录的babel.config.js中添加SVG插件：

   module.exports = {
     presets: ['module:metro-react-native-babel-preset'],
     plugins: ['react-native-svg/plugin'],
   };
   

4. 清除缓存并重启服务
   执行命令清除metro缓存，再重新启动项目：

   npx react-native start --reset-cache
   # 重新运行对应平台项目
   npx react-native run-android # 或 run-ios
   

5. 调整SVG组件属性
   避免使用百分比作为宽高值（部分场景下会导致渲染异常），改用具体数值：

   <Svg height={200} width={200} viewBox="0 0 100 100">
     {/* 原有Circle代码 */}
   </Svg>
   

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