最近、アプリのスプラッシュアニメーションの実装についてばかり投稿していますが…多分今回でそれも終わるはずです！
今回は「react-native-animated-splash-screen」ライブラリについてご紹介。
前回から紹介していた「react-native-animated-splash」がどうしても iOS で動いてくれなかったので…「react-native-animated-splash-screen」ライブラリを使用することにしました。
GitHub のページはこちらから。
GitHub – fabio-alss-freitas/react-native-animated-splash-screen: Animated splash screen component for React Native project.
https://github.com/fabio-alss-freitas/react-native-animated-splash-screen
ライブラリのインストールには下記コマンドを実行します。
1 | npm install --save react-native-animated-splash-screen |
上記が完了したら、あとはアプリの初期ページでライブラリをインポートし、<AnimatedSplash> で囲みます。
1 | import AnimatedSplash from "react-native-animated-splash-screen"; |
1 2 3 4 5 6 7 8 9 10 11 | <AnimatedSplash translucent={false} isLoaded={!this.state.isLoading} logoImage={require("./resources/img/logo.png")} backgroundColor={"#FFFFFF"} logoHeight={180} logoWidth={180}> <Stack.Navigator initialRouteName='top'> ...... </Stack.Navigator></AnimatedSplash> |
このアプリでは「React Navigation」を使用しているのですが、<Stack.Navigator> をまるっと囲んでしまえばOKでした。
で、このスプラッシュアニメーションは、isLoaded に true を指定すると非表示になるので、なにかしらの処理が完了したタイミングで値を false から true に変更してください。
また、translucent の値ですが、こちらが true に設定されているとき、アプリはステータスバーの下に描画されます。
実際に実行して動作を確認したところ、true に設定していた場合、アプリのページ上部がステータスバーの下に潜り込んでレイアウトが崩れたので、私の環境では false を設定しています。
処理としては以上です。
表示/非表示時のアニメーションの指定はできないものの、個人的にはデフォルトのアニメーションが結構お洒落なのでおすすめです。
また、customComponent が用意されており、こちらに画像のかわりに任意のコンポーネントを指定できるので、テキストと画像といった画面を表示することができます。
個人的には、「react-native-animated-splash-screen」ライブラリの方が実装がお手軽かなと思います。
このあたりは個人の好みに寄るので、是非両方を比べてみてください。
以上、React Native でスプラッシュアニメーションを実装できるライブラリ「react-native-animated-splash-screen」のご紹介でした。
ご参考になれば幸いです。
