ReactNativeアプリでアイコンを使用する

目次

1. ライブラリのインストール
2. linkコマンド実行と設定ファイルの修正
3. jsファイルの記述

参照１
参照２

1. ライブラリのインストール

react-native-vector-iconsをインストールする

$ npm npm install react-native-vector-icons

2. linkコマンド実行と設定ファイルの修正

linkコマンドを実行

$ npm react-native link react-native-vector-icons

android/app/build.gradleに下記を追記

android/app/build.gradle

・・・
apply from: "../../node_modules/react-native/react.gradle"
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle" // 追記
・・・

3. jsファイルの記述

公式ディレクトリで実装したいアイコンを探す
以下、FontAwesomeのtoggle-offを実装する時の記述

Main.js

import Icon from 'react-native-vector-icons/FontAwesome';

  return(
・・・
    <Icon
      name='toggle-off'
      color='#808080'
      size={40}
      onPress={() =>
        toggleOn(listData.no)
      }
    />
・・・
   );