react-native-vector-icons

2019-05-03

react-native-vector-iconsライブラリを使ってアイコンを表示して見ましょう。

概要

RNプロジェクトへベクターアイコンを使うためreact-native-vector-icons ライブラリを使って見ましょう。

ライブラリインストール

下記のコマンドでreact-native-vector-iconsをインストールします。

npm install react-native-vector-icons --save

インストールが完了されたら下記のコマンドでライブラリをプロジェクトへリンクします。

react-native link react-native-vector-icons

使い方

私たちは基本的使ったことがある場合、ブログを作成します。したがってここには私たちが実際使って分かった内容を追加する予定です。

使い方を詳しく知りたい方は公式サイトを見てください。

Material icons

Material iconを使う方法

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

export default class Home extends React.Component<Props, State> {
    render() {
        return (
            <View>
                <Icon name="home" size={24} color="#ffffff" />
            </View>
        );
    }
}

参考

Buy me a coffeeBuy me a coffee
Posts