web-dev-qa-db-ja.com

React NativeにSVGファイルを表示する方法は？

私は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>

また、反応ネイティブは基本的にsvgをサポートしていないことを知っていますが、誰かがこの問題をトリッキーな方法で修正したと思います（react-native-svgの有無にかかわらず）

javascriptsvgreact-native
60
the_bluescreen

次のソリューションを使用しました。

  1. https://svg2jsx.herokuapp.com/ で.svg画像をJSXに変換します
  2. https://svgr.now.sh/ を使用してJSXをreact-native-svgコンポーネントに変換します（[React Native]チェックボックスをオンにします）
26
Ihor Burlachenko

多くの方法とライブラリを試した後、新しいフォントを作成し（ Glyphs またはこの tutorial ）、SVGファイルを追加してから、「テキスト」コンポーネントを使用してカスタムフォント。

これは、react-nativeのSVGで同じ問題を抱えている人に役立つことを願っています。

7
Amir Khorsandi

ここに別のソリューションを投稿しました 反応（ネイティブ）アプリケーションにベクトル（svg）グラフを挿入するのに最適なアプローチ 、このアプローチでは、svgファイルの代わりに（svgからの）ベクトルフォントを使用します。 PS：iOSおよびAndroidで優れた機能を発揮し、ベクトルアイコンの色とサイズも変更できます。

アプリに直接svgを挿入する場合は、サードパーティライブラリ：react-native-svgを試すことができます。 GitHubに3k個以上の星がある場合、これは最良のアプローチの1つです。

  • インストール：
    • npm i react-native-svg
    • npm i react-native-svg-uri
  • ネイティブへのリンク：
    • 反応ネイティブリンクreact-native-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}
  />
);
6
Cassio Seffrin

同じ問題がありました。私が見つけたこのソリューションを使用しています： React Native display SVG from a file

これは完璧ではありません。Androidでのパフォーマンスが大幅に低下するため、今日も再訪しています。

3
Sledge Hammer

https://github.com/kristerkari/react-native-svg-transformer を使用します

このパッケージでは、React Native v0.57以前では.svgファイルがサポートされていないため、svgファイルには.svgx拡張子を使用することが記載されています。

Webまたはreact-native-webを使用する場合 https://www.npmjs.com/package/@svgr/webpack

React-nativeバージョン0.57以前でreact-native-svg-uriを使用してsvgファイルをレンダリングするには、次のファイルをルートプロジェクトに追加する必要があります

注：拡張子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"];
    }
  };

上記のソリューションは本番アプリでも動作します✅

1
Aravind Vemula

注：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')} />
0
Daniel Raouf