Как показать файл SVG в React Native?

Я хочу показать файлы svg (у меня есть куча изображений svg), но то, что я не мог найти, как показать. Я пробовал использовать компоненты Image и Use из react-native-svg, но они с этим не работают. И я попытался сделать это родным способом, но показать только изображение svg очень сложно.

Пример кода:

import Svg, {
  Use,
  Image,
} from 'react-native-svg';

<View>
  <Svg width="80" height="80">
     <Image href={require('./svg/1f604.svg')} />
  </SvgRn>
</View>

Также я знаю, что собственный response не поддерживает svg в основном, но я думаю, что кто-то исправил эту проблему хитрым способом (с / без response-native-svg)

Я использовал следующее решение:

1. Конвертируйте .svgизображение в JSX с помощью https://svg2jsx.herokuapp.com/
2. Преобразуйте JSX в react-native-svgкомпонент с https://svgr.now.sh/ (установите флажок «React Native»)

Я разместил здесь другое решение. Это лучший подход для вставки векторного (svg) графика в собственное приложение React. Этот подход использует векторный шрифт (из svg) вместо файла svg. PS: Он отлично работает на ios и android, и вы также можете изменить цвет и размер своего векторного значка.

Если вы хотите вставить svg прямо в свое приложение, вы можете попробовать стороннюю библиотеку: response-native-svg. С более чем 3000 звезд в github это один из лучших подходов.

• установить:
  • npm я реагирую-native-svg
  • npm я реагирую-родной-svg-uri
• ссылка на родной:
  • реагировать-родная ссылка реагировать-родной-SVG

А вот образец:

import * as React from 'react';
import SvgUri from 'react-native-svg-uri';
import testSvg from './test.svg';
export default () => (
  <SvgUri
    width="200"
    height="200"
    svgXmlData={testSvg}
  />
);

Попробовав множество способов и библиотек, я решил создать новый шрифт (с помощью Glyphs или этого руководства ) и добавить к нему мои файлы SVG, а затем использовать компонент «Текст» с моим настраиваемым шрифтом.

Надеюсь, это поможет любому, у кого такая же проблема с SVG в react-native.

Установите react-native-svg-transformer

npm я реагирую-родной-SVG-трансформатор --save-dev

Я использую SVG следующим образом, и он отлично работает

import LOGOSVG from "assets/svg/logo.svg"

в рендере

<View>
  <LOGOSVG 
    width="100%"
    height="70%"
  />
</View>

У меня такая же проблема. Я использую это решение, которое я нашел: React Native display SVG из файла

Он не идеален, и я возвращаюсь к нему сегодня, потому что он работает намного хуже на Android.

Используйте https://github.com/kristerkari/react-native-svg-transformer

В этом пакете упоминается, что .svgфайлы не поддерживаются в React Native v0.57 и ниже, поэтому используйте .svgxрасширение для файлов svg.

Для Интернета или response-native-web используйте https://www.npmjs.com/package/@svgr/webpack

Для рендеринга файлов svg react-native-svg-uriс использованием react-native версии 0.57 и ниже вам необходимо добавить следующие файлы в ваш корневой проект

Примечание: измените расширение svgнаsvgx

шаг 1: добавить файл transformer.jsв корень проекта

// 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 });
}

шаг 2: добавить rn-cli.config.jsв корень проекта

module.exports = {
    getTransformModulePath() {
      return require.resolve("./transformer");
    },
    getSourceExts() {
      return [/* "ts", "tsx", */ "svgx"];
    }
  };

Вышеупомянутые решения будут работать и в производственных приложениях ✅

Я пробовал все вышеперечисленные решения и другие решения вне стека, и ни один из них не работал у меня. наконец, после долгих исследований я нашел одно решение для своего выставочного проекта.

Если вам нужно, чтобы он работал в expo, одним из обходных путей может быть использование https://react-svgr.com/playground/ и перемещение распространения реквизита в элемент G вместо корня SVG следующим образом:

import * as React from 'react';
import Svg, { G, Path } from 'react-native-svg';

function SvgComponent(props) {
  return (
    <Svg viewBox="0 0 511 511">
      <G {...props}>
        <Path d="M131.5 96c-11.537 0-21.955 8.129-29.336 22.891C95.61 132 92 149.263 92 167.5s3.61 35.5 10.164 48.609C109.545 230.871 119.964 239 131.5 239s21.955-8.129 29.336-22.891C167.39 203 171 185.737 171 167.5s-3.61-35.5-10.164-48.609C153.455 104.129 143.037 96 131.5 96zm15.92 113.401C142.78 218.679 136.978 224 131.5 224s-11.28-5.321-15.919-14.599C110.048 198.334 107 183.453 107 167.5s3.047-30.834 8.581-41.901C120.22 116.321 126.022 111 131.5 111s11.28 5.321 15.919 14.599C152.953 136.666 156 151.547 156 167.5s-3.047 30.834-8.58 41.901z" />
        <Path d="M474.852 158.011c-1.263-40.427-10.58-78.216-26.555-107.262C430.298 18.023 405.865 0 379.5 0h-248c-26.365 0-50.798 18.023-68.797 50.749C45.484 82.057 36 123.52 36 167.5s9.483 85.443 26.703 116.751C80.702 316.977 105.135 335 131.5 335a57.57 57.57 0 005.867-.312 7.51 7.51 0 002.133.312h48a7.5 7.5 0 000-15h-16c10.686-8.524 20.436-20.547 28.797-35.749 4.423-8.041 8.331-16.756 11.703-26.007V503.5a7.501 7.501 0 0011.569 6.3l20.704-13.373 20.716 13.374a7.498 7.498 0 008.134 0l20.729-13.376 20.729 13.376a7.49 7.49 0 004.066 1.198c1.416 0 2.832-.4 4.07-1.2l20.699-13.372 20.726 13.374a7.5 7.5 0 008.133 0l20.732-13.377 20.738 13.377a7.5 7.5 0 008.126.003l20.783-13.385 20.783 13.385a7.5 7.5 0 0011.561-6.305v-344a7.377 7.377 0 00-.146-1.488zM187.154 277.023C171.911 304.737 152.146 320 131.5 320s-40.411-15.263-55.654-42.977C59.824 247.891 51 208.995 51 167.5s8.824-80.391 24.846-109.523C91.09 30.263 110.854 15 131.5 15s40.411 15.263 55.654 42.977C203.176 87.109 212 126.005 212 167.5s-8.824 80.391-24.846 109.523zm259.563 204.171a7.5 7.5 0 00-8.122 0l-20.78 13.383-20.742-13.38a7.5 7.5 0 00-8.131 0l-20.732 13.376-20.729-13.376a7.497 7.497 0 00-8.136.002l-20.699 13.373-20.727-13.375a7.498 7.498 0 00-8.133 0l-20.728 13.375-20.718-13.375a7.499 7.499 0 00-8.137.001L227 489.728V271h8.5a7.5 7.5 0 000-15H227v-96.5c0-.521-.054-1.03-.155-1.521-1.267-40.416-10.577-78.192-26.548-107.231C191.936 35.547 182.186 23.524 171.5 15h208c20.646 0 40.411 15.263 55.654 42.977C451.176 87.109 460 126.005 460 167.5V256h-.5a7.5 7.5 0 000 15h.5v218.749l-13.283-8.555z" />
        <Path d="M283.5 256h-16a7.5 7.5 0 000 15h16a7.5 7.5 0 000-15zM331.5 256h-16a7.5 7.5 0 000 15h16a7.5 7.5 0 000-15zM379.5 256h-16a7.5 7.5 0 000 15h16a7.5 7.5 0 000-15zM427.5 256h-16a7.5 7.5 0 000 15h16a7.5 7.5 0 000-15z" />
      </G>
    </Svg>
  );
}

export default function App() {
  return (
    <SvgComponent width="100%" height="100%" strokeWidth={5} stroke="black" />
  );
}

Примечание: Svg не работает для версий Android, поэтому не рассматривайте для Android. Он будет работать для Android только в режиме отладки. Но на ios работает нормально.

Используйте https://github.com/vault-development/react-native-svg-uri

Установить

npm install react-native-svg-uri --save
react-native link react-native-svg # not react-native-svg-uri

Применение

import SvgUri from 'react-native-svg-uri';


<SvgUri source={require('./path_to_image/image.svg')} />

Я использую эти два плагина,

1. [response-native-svg] https://github.com/react-native-community/react-native-svg )
2. [react-native-svg-transformer] https://github.com/kristerkari/react-native-svg-transformer )

Прежде всего, вам необходимо установить этот плагин. После этого вам нужно изменить свой metro.config.js с помощью этого кода.

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

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

Более подробную информацию вы можете найти по этой ссылке.

• https://medium.com/game-development-stuff/how-to-import-svgs-on-react-native-dc76b56403ba
• https://medium.com/@majirosstefan/the-svgs-inside-react-native-0-61-5-and-storybook-566bcd43ba94

вы можете преобразовать любой SVG в компонент и сделать его многоразовым.

вот мой ответ на самый простой способ сделать это

SVG в компонент

import React from 'react'
import SvgUri from 'react-native-svg-uri';

export default function Splash() {
  return (
    <View style={styles.container}>
      {/* provided the svg file is stored locally */}
      <SvgUri
        width="400"
        height="200"
        source={require('./logo.svg')}
      />
      {/* if the svg is online */}
      <SvgUri
        width="200"
        height="200"
        source={{ uri: 'http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg' }}
      />

      <Text style={styles.logoText}>
        Text
      </Text>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  logoText: {
    fontSize: 50
  }
});

Все эти решения абсолютно ужасны. Просто конвертируйте свой SVG в PNG и используйте ванильный <Image/>компонент. Тот факт, что react-native по-прежнему не поддерживает изображения SVG в Imageкомпоненте, - это шутка. Никогда не устанавливайте дополнительную библиотеку для такой простой задачи. Используйте https://svgtopng.com/