web-dev-qa-db-ja.com

スプラッシュ画面でイントロアニメーションを再生するには、ネイティブエキスポを反応させますか？

現在、app.jsonに.gifを追加しても機能しません

"splash": {
   "image": "./assets/splash.gif"
}

編集：どうやら、彼らは現在それに取り組んでいるようです、ここ：（ https://expo.canny.io/feature-requests/p/improved-splash-screen-api ）。

react-nativeexpo
4
Snowman

スプラッシュスクリーンにgifを使用しようとしているようです。さて、悪いニュースがあります。ネイティブプラットフォーム（iOSおよびAndroid）のスプラッシュスクリーンAPIはgifをサポートしていません。事実、それらは「png」画像のみをサポートしています。

しかし、良いニュースは回避策があることです。

プロジェクトにも同様の要件があるため、gif AppLoading（Expoによって提供） コンポーネントを作成しました。これは、gif画像の面を持ち、バックグラウンドでAppLoadingと同様に機能します（つまり、データのフェッチとキャッシュ）。デフォルトのスプラッシュ画面には静的なpng画像を使用し、静的な画像からgifへの移行はうまくいきました。

これは最も簡単な方法ですが、静的なスプラッシュスクリーンとアニメーションの間に白い画面が短時間表示されるという欠点があります。これは、JavaScriptバンドルがバックグラウンドでダウンロードされているため、JS全体がロードされない限り、白い画面が表示されます。

  • これを克服するには、いくつかのネイティブ変更を行うため、expoアプリを切り離す必要があります。
  • インストールして、この モジュール の指示に従ってください。このモジュールの利点は、JavaScriptの「非表示」関数を公開することです。

アプリの基本的な流れ。

  • アプリの読み込み開始=>静的スプラッシュ画面が表示されます
  • 画面は、JavaScriptバンドルが読み込まれないまで表示されます
  • バンドルロード=> SplashScreenコンポーネントのComponentDidMountのモジュールによって公開された非表示関数を呼び出す
  • 静的スプラッシュ画面が非表示になる=>アニメーションスプラッシュ画面は、バックグラウンドタスクが機能しているときに表示されます（キャッシュとAPI呼び出し）
  • 追加のアプリフロー
7
Bharat23

起動画面について話していて、create-react-native-appを使用していない場合は、アニメーションを使用するためにプラットフォームごとに ネイティブの起動画面を編集 する必要があります。

Expoでcreate-react-native-appを使用している場合は、 スプラッシュスクリーンAPI を確認できます。

5
wmcbain

Expoバージョン29以降は、アニメーションのSVGおよびGIFをサポートしています。また、AppLoadingなしで独自のスプラッシュ画面を生成するAPIも提供します。

確認してください： https://docs.expo.io/versions/v29.0.0/sdk/splash-screen#example-without-apploading

2
Agu Dondo

Expoチームが完了しました：「Improved Splash Screen API」チケット。だから今、あなたは彼らのドキュメントで説明されているようにそれを行うことができます： https://docs.expo.io/versions/v29.0.0/sdk/splash-screen/ ！

1
Snowman