react-native-vector-iconsを使おうとして赤い画面に泣かされた時に見る覚書

よく見りゃREADME.mdに書いてある内容なんですが、日本語じゃないので自分が忘れた時に備えて覚書。 起きたこと react-native-vector-iconsを使おうとした。 [bash] $ npm insta […]

広告ここから
広告ここまで

目次

    よく見りゃREADME.mdに書いてある内容なんですが、日本語じゃないので自分が忘れた時に備えて覚書。

    起きたこと

    react-native-vector-iconsを使おうとした。

    [bash]
    $ npm install react-native-vector-icons –save
    $ rnpm link
    [/bash]

    コードを書いた

    [js]
    var Icon = require(‘react-native-vector-icons/FontAwesome’);
    //中略
    <Icon name="rocket" size={30} color="#900" />
    [/js]

    シュミレーターが赤く染まった。
    スクリーンショット 2016-03-29 22.46.32

    やったこと

    XCodeプロジェクトの中にフォントが登録できていないことが原因らしいので、XCodeから手動で追加する。

    スクリーンショット 2016-03-29 22.52.47

    React NativeのアプリをXCodeで開く時はこのファイルを選択する。

    スクリーンショット 2016-03-29 22.53.40

    info.plistというファイルを開く

    スクリーンショット 2016-03-29 22.54.35
    「Add Row」で項目を追加。

    スクリーンショット 2016-03-29 22.54.48
    「Fonts provided by application」をKeyに設定

    スクリーンショット 2016-03-29 22.55.23

    「Resources」 というディレクトリにアイコンフォントが一式入っているので、使用したいフォントファイル名を「value」に追加する。

    スクリーンショット 2016-03-29 22.57.36

    複数登録も可能。

    この状態でビルドし直すことでフォントが読み込まれる。

    [bash]
    $ react-native run-ios
    [/bash]

    スクリーンショット 2016-03-29 23.04.06

    タブのアイコンがFontAwesomeになりました。

    書いたコード差分

    参考にした部分

    広告ここから
    広告ここまで
    Home
    Search
    Bookmark