概要
React Nativeで、Haptic FeedbackとLottieを利用したアニメーションが実現できるのか、簡単なアプリを実装して試してみた。
実現できたか
結果から書くと、動作させること自体はとても簡単だった。
まったくのReact Native初心者の私でも環境構築含め一日程度でできた。
アプリへの組み込みは開発者の実装速度に依存するところが大きいが、ちょっと頑張ればいけるという肌感。
サンプル紹介
Haptic Feedbackの実装
以下のリポジトリでサンプルアプリを公開している。
https://github.com/macneko-ayu/RNHapticFeedbackSample
READMEに書いているとおりだけど、react-native-haptic-feedbackというパッケージを導入した。
アプリを起動すると以下のように画面上にボタンがいくつか表示される。
ボタンのラベルの文字列はHaptic Feedbackとして用意されている設定と同期していて、各ボタンをタップするとその設定のHaptic Feedbackが作動する。
Haptic Feedbackを実装する際はOS標準のアプリのHaptic Feedbackを参考にして、同じ世界観になるようにこの設定の中から選択する必要があると思う。
Lottieの実装
以下のリポジトリでサンプルアプリを公開している。
https://github.com/macneko-ayu/RNLottieSample
READMEに書いているとおりだけど、lottie-react-nativeというパッケージを導入した。
アプリを実行するとLottieのリポジトリにあったサンプルのアニメーションが実行される。
サンプルではアニメーションを読み込んでループ再生しているだけだが、実際のアプリではスクロール時に実行したり、ボタンタップ時に実行したりと、イベントに連動するように使われるので、もう少し工夫する必要があると思う。
React Nativeについて
環境構築
公式のGetting Startedの通りにやれば大体できる。
私の環境では node_modules のPATHが通っておらずコケてしまったので、以下の記事を参考にしてPATHを通した。
ReactNativeを使ってみる
iOSの場合はいつもの如くXcodeでCode Signと戦ってくれ。
Androidは実機がなくて試してない。
所感
とにかくビルドが遅い。
Swiftがとてもかわいく思えるくらい遅い。
Hot Reloadできたりするので、積極的に利用するといい。
最後に
この程度のサンプルアプリを公開することに若干の抵抗があったけど、誰かの役に立てれば幸い。
