今のお仕事でReact Nativeを使ってアプリを作っていますが、
デザインで、マテリアルデザインのUIが使われていて、既存のコンポーネントを使おうとしたのですが、なかなか手こずってしまったので備忘録。
今回使おうとしたコンポーネントは以下のコンポーネントになります。
http://xinthink.github.io/react-native-material-kit/
インストール手順
npmやyarnを使って普通にパッケージをインストール。
まずはnpmやyarnを使って普通にパッケージをインストールします。
npm i -S react-native-material-kitまたはyarn add react-native-material-kitをプロジェクトディレクトリでターミナルから実行。
で、通常のパッケージであれば、これで以下のようにコードを書いたらコンポーネントが使えるようになります。
ただ、このまま実行をすると・・・・
こうなりました・・・orz
Xcodeにライブラリを追加
上記のままだとダメみたいで、どうやら、Xcode上から必要なライブラリを登録してからビルドをしないといけないみたいです。
よく見たらGithubにも方法が載っていました。
①React Nativeのバージョンが0.29以上 (Using rnpm)
rnpm install react-native-material-kit
②React Nativeのバージョンが0.2８以下
npm install -S react-native-material-kit
を実行してから
npx react-native link react-native-material-kit
を【実行する
①はrnpmというReact Native用のパッケージマネージャーを使った方法です。
自分は①だと何故かエラーが出てビルドが通らなくなってしまったので、②の方法で実行しました。
react-native link <パッケージ名>を実行することで、ビルド時にパッケージに含まれているリソースライブラリファイルを含めた状態でビルドをかけてくれます。
ただ、②を実行しても環境によってはビルド時にエラーが出てしまうこともあり、今回、これに遭遇してしまったため、
手動でライブラリを登録しました。
手動でXcodeにライブラリを追加する方法
- 左側のメニューの
Librariesを右クリックして「Add Files to プロジェクト名」を選択し、そこからnode_modules/react-native-material-kit/iOS/RCTMaterialKit.xcodeprojをプロジェクト内に追加。 -
「Build Phases」内の「Link Library With Libraries」からRCTMaterialKit.xcodeproj内の「Products」配下にある
libRCTMaterialKit.aを追加。
上記を実行してようやくビルドが通るようになりました。
英文ですがGithubのマニュアルにも書いてあるので参考にしてください。
https://github.com/xinthink/react-native-material-kit