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

Я хочу показать файлы SVG (у меня есть куча изображений SVG), но я не смог найти способ показать. Я пытался использовать компоненты Image и Use реагировать на 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>

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

Ответы

Ответ 1

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

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

Ответ 2

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

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

Ответ 3

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

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

Ответ 4

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

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

  • установить:
    • нпм я реагирую родной svg
    • нпм я реагирую родной 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}
  />
);

Ответ 5

Примечание: 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')} />

Ответ 6

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

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

Для веб-сайта или для реагирования на родной веб-сайт используйте https://www.npmjs.com/package/@svgr/webpack.

Для рендеринга SVG файлов с использованием react-native-svg-uri с Reaction-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 в корневой rn-cli.config.js проекта

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

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