You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

React Native从0.77.0升级到0.79.2后react-native-svg图标无法显示求助

React Native从0.77.0升级到0.79.2后react-native-svg图标无法显示求助

各位大佬好,我最近把React Native项目从0.77.0升级到0.79.2后,碰到个糟心的问题:所有用react-native-svg引入的图标都显示不出来了。下面是我的项目配置和相关代码片段,麻烦帮忙看看问题出在哪?

项目package.json关键配置

{
  "name": "LearnOn",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest",
    "docs": "typedoc"
  },
  "dependencies": {
    "@gorhom/bottom-sheet": "^5",
    "@notifee/react-native": "^9.1.8",
    "@react-native-async-storage/async-storage": "^2.1.2",
    "@react-native-community/netinfo": "^11.4.1",
    "@react-native-firebase/app": "^21.14.0",
    "@react-native-firebase/messaging": "^21.14.0",
    "@react-navigation/bottom-tabs": "^7.2.0",
    "@react-navigation/drawer": "^7.1.1",
    "@react-navigation/material-top-tabs": "^7.1.0",
    "@react-navigation/native": "^7.0.14",
    "@react-navigation/native-stack": "^7.2.0",
    "@realm/react": "^0.11.0",
    "@reduxjs/toolkit": "^2.5.1",
    "@types/react-native-vector-icons": "^6.4.18",
    "axios": "^1.7.9",
    "date-fns": "^4.1.0",
    "lottie-react-native": "^7.2.2",
    "react": "19.0.0",
    "react-native": "0.79.2",
    "react-native-big-calendar": "^4.17.1",
    "react-native-blob-util": "^0.21.2",
    "react-native-bootsplash": "^6.3.7",
    "react-native-circular-progress-indicator": "^4.4.2",
    "react-native-collapsible": "^1.6.2",
    "react-native-device-info": "^14.0.4",
    "react-native-fs": "^2.20.0",
    "react-native-gesture-handler": "^2.24.0",
    "react-native-gifted-charts": "^1.4.58",
    "react-native-image-picker": "^8.2.0",
    "react-native-linear-gradient": "^2.8.3",
    "react-native-orientation-locker": "^1.7.0",
    "react-native-pager-view": "^6.7.0",
    "react-native-pdf": "^6.7.7",
    "react-native-popover-view": "^6.1.0",
    "react-native-progress": "^5.0.1",
    "react-native-reanimated": "^3.18.0",
    "react-native-render-html": "^6.3.4",
    "react-native-responsive-hook": "^1.0.4",
    "react-native-safe-area-context": "^5.1.0",
    "react-native-screens": "^4.6.0",
    "react-native-share": "^12.0.11",
    "react-native-svg": "^15.12.0",
    "react-native-svg-transformer": "^1.5.1",
    "react-native-table-component": "^1.2.2",
    "react-native-vector-icons": "^10.2.0",
    "react-native-webview": "^13.13.2",
    "react-native-zip-archive": "^7.0.1",
    "react-redux": "^9.2.0",
    "realm": "^12.14.1",
    "redux": "^5.0.1",
    "toastify-react-native": "^7.1.0",
    "typedoc": "^0.28.4",
    "xml-js": "^1.6.11"
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@babel/preset-env": "^7.25.3",
    "@babel/runtime": "^7.25.0",
    "@react-native-community/cli": "18.0.0",
    "@react-native-community/cli-platform-android": "18.0.0",
    "@react-native-community/cli-platform-ios": "18.0.0",
    "@react-native/babel-preset": "0.79.2",
    "@react-native/eslint-config": "0.79.2",
    "@react-native/metro-config": "0.79.2",
    "@react-native/typescript-config": "0.79.2",
    "@types/axios": "^0.9.36",
    "@types/jest": "^29.5.13",
    "@types/node": "^22.13.10",
    "@types/react-native-table-component": "^1.2.8",
    "@types/react": "^19.0.0",
    "@types/react-test-renderer": "^19.0.0",
    "babel-plugin-module-resolver": "^5.0.2",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "prettier": "2.8.8",
    "react-test-renderer": "19.0.0",
    "typedoc-plugin-markdown": "^4.6.3",
    "typescript": "5.0.4"
  },
  "engines": {
    "node": ">=18"
  }
}

图标导入与使用的代码片段(注:代码存在截断)

import React from 'react';
import {SvgProps} from 'react-native-svg';
import sampleIcon from '../assets/SvgImages/sampleIcon.svg';

export const icons = {
  sampleIcon: SampleIcon,
} as con

我已经尝试过的排查步骤

  • 确认react-native-svg和react-native-svg-transformer版本兼容RN 0.79.2(官方文档显示react-native-svg@15.12.0支持RN 0.78+)
  • 重新执行了iOS的pod install和Android的./gradlew clean
  • 清除Metro缓存:npx react-native start --reset-cache
  • 检查SVG文件语法,确认没有格式错误

想请教的问题

有没有朋友遇到过类似的升级问题?会不会是RN 0.79对Metro配置做了调整,导致SVG transformer没生效?或者TypeScript的类型配置哪里出了问题?麻烦各位给点思路,谢谢啦!

内容来源于stack exchange

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.08 08:08:10