2021年1月4日

プログラミング

react-native-svgを使ってReact NativeでSVGを扱う

react-native-svgを使ってReact NativeでSVGを扱うreact-native-svgを使ってReact NativeでSVGを扱う

目次

  1. はじめに
  2. 導入手順
  3. 使用方法
  4. まとめ

はじめに

React NativeではSVGを表示することができません。そのため画像素材などはpngなどを用意するのが一般的でした。ですが、react-native-svgなどのライブラリを使用することでReact NativeでもSVG画像を使用することができます。今回はreact-native-svgを使用したSVG画像の使用手順についてご紹介します。

react-native-svgとはReact Native上でSVG画像を表示するためにするライブラリです。

https://github.com/react-native-svg/react-native-svg

使い方もSVGを触ったことがある人であれば難しくなく扱うことができます。

導入手順

React Native

導入についてはReact Nativeのプロジェクト内で以下のコマンドを入力してインストールします。

$ yarn add react-native-svg
React Native Expo

React Native Expoプロジェクトで追加する場合にはこちらでインストールします。

$ expo install react-native-svg

インストールが完了すれば準備完了です。

使用方法

で実際に使用手順について解説をしていきます。今回は以下のようなSVGを用意しました。

見た目

Ellipse 1.png (1.4 kB)

ソースコード
<svg width="100" height="100" viewBox="0 0 100 100" fill="none">
  <circle cx="50" cy="50" r="50" fill="#40ff00">
  </circle>
</svg>

react-native-svgはSVGファイルをReact Native用に書き換える必要があるので上記SVGファイルを元に書き換えをしていきます。まずは実際にSVGを表示したいファイルにreact-native-svgをimportします。

import Svg, {
  Circle,
  Ellipse,
  G,
  Text,
  TSpan,
  TextPath,
  Path,
  Polygon,
  Polyline,
  Line,
  Rect,
  Use,
  Image,
  Symbol,
  Defs,
  LinearGradient,
  RadialGradient,
  Stop,
  ClipPath,
  Pattern,
  Mask,
} from 'react-native-svg';

これらを見て気がつく方もいるかもしれませんが、これらはすべてSVGのタグになっています。元々のSVGのタグは小文字ですがreact-native-svgではすべて頭の文字が大文字になっています。そのため、もともとのSVGファイルを表示したい箇所に貼り付けたら、SVGのタグをすべて大文字に変更します。

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

const Icon = props => {
  return (
    <view>
      <svg width="100" height="100" viewBox="0 0 100 100" fill="none">
        <circle cx="50" cy="50" r="50" fill="#40ff00"></circle>
      </svg>
    </view>
  );
}

これでsvg画像をReact Nativeで使用することができます。

SVGアイコンをコンポーネントとして活用する

react-native-svgで記述したsvgは外部からpropsを渡すことで通常のReact Native同様、値の受け取りが可能です。そのため以下のようにpropsを設定することで、アイコンの大きさや色などを可変にすることができるコンポーネントを実装することができます。

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

const Icon = props => {
  const { size = 80, color = "#ff0000" } = props;
  return (
    <view>
      <svg width="{size}" height="{size}" viewBox="0 0 100 100" fill="none">
        <circle cx="50" cy="50" r="50" fill="{color}/"></circle>
      </svg>
    </view>
  );
}

まとめ

今回はreact-native-svgを使用したReact Nativeでのsvg画像の利用についてご紹介しました。SVG画像を使用することで端末によって画像が荒くなったりすることを防ぐことができますし、端末の解像度に応じて複数枚画像を用意する手間もなくなるので便利です。活用してみてはいかがでしょうか。

React Nativeのお仕事に関するご相談

Bageleeの運営会社、palanではReact Nativeに関するお仕事のご相談を無料で承っております。
zoomなどのオンラインミーティング、お電話、貴社への訪問、いずれも可能です。
ぜひお気軽にご相談ください。

無料相談フォームへ

0

0

AUTHOR

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReactやReact Nativeをよく触っています。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ
palanar

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

webar_waterpark

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にpalan(旧eishis)を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReactやReact Nativeをよく触っています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRを中心に企画・マークアップ・開発をやっています。森に住んでいます。

デザイナーゲスト

ゲスト デザイナー

かっきー

かっきー

きうち

きうち

suzuki

suzuki

taro

taro

xR界隈のビズをやっています。新しいガジェットとか使うのが好きです。あとお寿司は玉子のお寿司が好きです。

miyagi

ogawa

ogawa

雑食デザイナー。UI/UXデザインやコーディング、時々フロントエンドやってます。最近はARも。

いわもと

いわもと

CONTACT PAGE TOP