ペペロミア開発ブログ

React Nativeで開発しているアプリ「ペペロミア」の技術系記事を投稿してます

React Nativeでローディング画面を実装

今後の発展としてWeb版の実装のためログイン後のデータ管理はFirestoreで行う実装に変更しています。

で、実際にFirestoreに繋いで動かしてみたら、(当たり前ですが)SQLiteに比べるとデータ読み込みの遅いので色々と表示がチラつく部分があったので、ローディング画面を実装しました。

元々の状態だとこんな感じでした。

f:id:wheatandcat:20200203224741g:plain:w200

f:id:wheatandcat:20200203224823g:plain:w200

実装

react-native-svg-animated-linear-gradientを使用して実装しました。

github.com

Expoでも組み込み可能で、以下の画像みたいなのが簡単に作れるライブラリです

https://raw.githubusercontent.com/virusvn/react-native-svg-animated-linear-gradient/master/images/demo-svg-animated-linear-gradient.gif

コードはこんな感じ

<SvgAnimatedLinearGradient height={300}>
    <Circle cx="30" cy="30" r="30"/>
    <Rect x="75" y="13" rx="4" ry="4" width="100" height="13"/>
    <Rect x="75" y="37" rx="4" ry="4" width="50" height="8"/>
    <Rect x="0" y="70" rx="5" ry="5" width="400" height="200"/>
</SvgAnimatedLinearGradient>

これを使って実装しました。 基本的には通常の画面をInspectorを使って各パーツのwidthとheightを確認して

f:id:wheatandcat:20200203225528p:plain

それをベースにコードを書いて完成です。

コードはこんな感じになりました。

github.com

実装画面

f:id:wheatandcat:20200203225845g:plain:w200

f:id:wheatandcat:20200203225927g:plain:w200

これで、ちょっとは違和感が消えれば良いなと思います。