タイトル通り、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 画像を表示できない時の対処法でした。
ご参考になれば幸いです。