Verwenden Sie https://github.com/kristerkari/react-native-svg-transformer
In diesem Paket wird erwähnt, dass .svgDateien in React Native v0.57 und niedriger nicht unterstützt werden. Verwenden Sie daher die .svgxErweiterung für SVG-Dateien.
Verwenden Sie für Web oder React-Native-Web https://www.npmjs.com/package/@svgr/webpack
Um SVG-Dateien react-native-svg-urimit der reaktionsnativen Version 0.57 und niedriger zu rendern , müssen Sie Ihrem Stammprojekt die folgenden Dateien hinzufügen
Hinweis: Ändern Sie die Erweiterung svginsvgx
Schritt 1: Datei transformer.jszum Stammverzeichnis des Projekts hinzufügen
// file: transformer.js
const cleanupSvg = require('./cleanup-svg');
const upstreamTransformer = require("metro/src/transformer");
// const typescriptTransformer = require("react-native-typescript-transformer");
// const typescriptExtensions = ["ts", "tsx"];
const svgExtensions = ["svgx"]
// function cleanUpSvg(text) {
// text = text.replace(/width="([#0-9]+)px"/gi, "");
// text = text.replace(/height="([#0-9]+)px"/gi, "");
// return text;
// }
function fixRenderingBugs(content) {
// content = cleanUpSvg(content); // cleanupSvg removes width and height attributes from svg
return "module.exports = `" + content + "`";
}
module.exports.transform = function ({ src, filename, options }) {
// if (typescriptExtensions.some(ext => filename.endsWith("." + ext))) {
// return typescriptTransformer.transform({ src, filename, options })
// }
if (svgExtensions.some(ext => filename.endsWith("." + ext))) {
return upstreamTransformer.transform({
src: fixRenderingBugs(src),
filename,
options
})
}
return upstreamTransformer.transform({ src, filename, options });
}
Schritt 2: rn-cli.config.jsZum Stammverzeichnis des Projekts hinzufügen
module.exports = {
getTransformModulePath() {
return require.resolve("./transformer");
},
getSourceExts() {
return [/* "ts", "tsx", */ "svgx"];
}
};
Die oben genannten Lösungen funktionieren auch in Produktions-Apps ✅