時折動作が重い React Native アプリの速度改善をいくつか試している中で「react-navigation-heavy-screen」というライブラリを見つけたのでまとめ。
ライブラリの説明文にも「React Nativeで重い画面を最適化して、React Navigation のスタックと遅延を防ぎます。」とありました。
GitHub のページはこちらから。
GitHub – nandorojo/react-navigation-heavy-screen: ⚡️Optimize heavy screens to prevent lags during React Navigation transitions.
https://github.com/nandorojo/react-navigation-heavy-screen
ライブラリのインストールには下記のコマンドを実行します。
npm install react-navigation-heavy-screen --save expo install react-native-reanimated
実装サンプルコードは下記のとおりです。
import React from 'react'
import { OptimizedHeavyScreen } from 'react-navigation-heavy-screen'
const Screen () => (
<OptimizedHeavyScreen>
<View>
......
</View>
</OptimizedHeavyScreen>
);
export default Screen
現在のコンポーネントを <OptimizedHeavyScreen> で囲えばOKとのことです。
なお、Props として、読み込み中に代わりに表示されるコンポーネントを placeholder で設定したりできます。
が、実際に上記を追加してアプリを実行したところ、アプリの画面に何も表示されなくなりました…！
現時点では何を間違えたのかまだわからないので、他のサンプルコードを探しながら原因を追究していきたいと思います。
何かわかったら、また記事にまとめるつもりです。
以上、React Native で動作の重い画面を最適化してくれるライブラリ「react-navigation-heavy-screen」のご紹介でした。
今回の記事は参考にならないと思いますが…ライブラリの紹介に関しては参考になれば幸いです。
