2021-09-21

第2回ReactNativeアプリ開発②〜UIコンポーネント選定

目次

ReactNative では UI コンポーネントのライブラリがいくつかありますが、今回はMaterial Kit React Nativeを使うことにしました。なんとなくデザインが一番しっくりきたからです。

テンプレートをダウンロード

前回の記事で expo init でプロジェクトを作成しましたがもう一度最初から作り直します。 理由は ReactNativePaper のように npm インストールして使うのではなく、そもそもコンポーネントが定義されているキットとして配布されているためです。ダウンロードで zip ファイルを落とすことができますが、git clone の方が個人的に楽なのでそうします。

git clone https://github.com/creativetimofficial/material-kit-react-native.git sample

cloneもしくは、サイトからzipファイルを落としてきたらディレクトリに移動して、関連パッケージをインストールするためにyarn installもしくはnpm installします。

$ yarn install

インストールが完了したら yarn start します。

$ yarn start

エラー

$ yarn start
yarn run v1.22.10
$ cross-env REACT_EDITOR=code expo start
ERROR: Node.js version 14.0.0 is no longer supported.
expo-cli supports following Node.js versions:
>=10.13.0 <11.0.0 (Active LTS)
>=12.0.0 <13.0.0 (Active LTS)
>=13.0.0 <14.0.0 (Current Release)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

node.js のバージョンがサポートしていないということで、node.js を v13.14.0 に下げたら今度は expo-cli のバージョンがあっていないとエラーが出て、いろいろ調整しててよくわからなくなったので、すべて戻して expo start したら普通に起動した。。。。

$ expo start
"md-switch" is not a valid icon name for family "ionicons"

warning が出ているけどひとまず気にしない

image

シュミレーターも問題なく動きました

© 2019 USA GIJUTSU.