浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【React Native】「react-native-svg-uri」ライブラリでSVG画像が表示できない

タイトル通り、React Native のライブラリ「react-native-svg-uri」を使って SVG 画像をページにしようとしても表示されない時の対処法についてです。
ちなみに環境は iOS です。
「react-native-svg-uri」の GitHub はこちらから。

vault-development/react-native-svg-uri: Render SVG images in React Native from an URL or static file
https://github.com/vault-development/react-native-svg-uri

「react-native-svg」ライブラリのインストールもやったし、npx pod-install もやったのですが、実際に動かすと何も表示されず…。
Issues も見てみたのですが、対処方法らしき記事は見つかりませんでした…。探し方が悪いのか…?

 

で、Google で検索したところ、参考になった記事がこちら。

Not rendering local images · Issue #1306 · react-native-svg/react-native-svg
https://github.com/react-native-svg/react-native-svg/issues/1306

で、紹介されていたサンプルコードがこちら。

import { SvgCssUri } from 'react-native-svg';
import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource';

const file = require('[SVG ファイルのパス]');
const svg = resolveAssetSource(file);

描写は下記のように行います。

<SvgCssUri uri={svg.uri} width="100%" height="100%" />

上記のように記述後、アプリを実行してみたところ、無事に SVG 画像が表示されました!
「react-native-svg-uri」を使わないで、SVG 画像を表示する方法があったのですね…。
最終的には、SVG 画像の色を動的に変更したいのですが…この記述方法でもできるのでしょうか?
この辺りは、これから調べていきます!

 

以上、React Native の「react-native-svg-uri」ライブラリを使って SVG 画像を表示できない時の対処法でした。
ご参考になれば幸いです。

  • この記事いいね! (0)