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
相关产品推荐
相关产品推荐

