react-native-vector-icon導入にて困ったこと。

Question

開発環境。

react-native init <project name>
にて作成。
npm i react-native-vector-icons　
react-native link済
xcodeにてInfo.plist内にFonts provided by applicationも発見。
react-native run-iosにてラウンチ

使用コード

import Icon from 'react-native-vector-icons/MaterialIcons'

〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜

<Icon name="file-upload" size={30} style={{color:'#FFFFFF'}}/>

エラー

多分使い方の問題ではなく、参照ファイルの問題。

stack over flow等でもある程度確認しましたが、この状態を解決できそうな記事を独力では見つけ切れませんでした。

一度vector-icon関係で別のエラーが出て、
rm ./node_modules/react-native/local-cli/core/fixtures/files/package.json
をしました。

解決方法わかりますでしょうか？

Answer 1

ちょっと RN のバージョンは古いですが再度 react-native link することでうまくいくようです

https://github.com/oblador/react-native-vector-icons/issues/135#issuecomment-263470798

package.json を消してしまったのはどうにもならないので、はじめからやってみてください

react-native init <Project Name>
cd <Project Name>
npm i react-native-vector-icons --save --save-exact
react-native link react-native-vector-icons
react-native run-ios

Comments

[MOTOMUR]

初めからやってみました。

error: bundling failed: Error: While resolving module `react-native-vector-icons/MaterialIcons`, the Haste package `react-native-vector-icons` was found. However the module `MaterialIcons` could not be found within the package. Indeed, none of these files exist:

このようなエラーが出るのですが、これを検索したところ、
rm ./node_modules/react-native/local-cli/core/fixtures/files/package.json
をすると治るとあったので、前のファイルではしていた次第です。

どのようにしたらうまく動くのでしょうか？

[januswel]

こちらで議論されている issue ですね

https://github.com/oblador/react-native-vector-icons/issues/626

手元で確認してみたら報告されているとおりの現象が出ました
次のワークアラウンドも効くようです

```
rm ./node_modules/react-native/local-cli/core/fixtures/files/package.json
```

ここで改めて↑のコマンドを打ってみてください
一度 `watchman watch-del-all` したほうが良いかもしれません

[MOTOMUR]

rm ./node_modules/react-native/local-cli/core/__fixtures__/files/package.json
どうやら、これは壊れたファイルらしく、取り除くと動きました。

rnpm linkもしてみて、色々してみたら治りました。ありがとうございました！