如何使用本機博覽會在啟動畫面上播放介紹動畫？

Question

目前，如果我向app.json添加.gif文件，它將無效

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

編輯：看起來，他們正在研究它，在這里：（ https://expo.canny.io/feature-requests/p/improved-splash-screen-api ）。

Answer 1

我看到你正在嘗試使用gif作為啟動畫面。 好吧，我有一個壞消息。 原生平台（iOS和Android）的啟動畫面API不支持gif，實際上它們只支持'png'圖像。

但是，好消息是有一個解決方法。

我們在項目中有類似的要求，所以我們創建了我們的自定義AppLoading（由Expo提供）組件，它具有我們的gif圖像的面，在后台它的工作方式類似於AppLoading，即獲取數據和緩存。 我們使用靜態png圖像作為默認的啟動畫面，靜態圖像到gif之間的轉換為我們工作。

這是最簡單的方法，但有一個缺點，即在靜態閃屏和動畫之間有短時間可見的白色屏幕。 這是因為您的javascript包正在后台下載，直到除非您的整個JS沒有加載，否則您將看到一個白色屏幕。

• 要解決這個問題，您需要分離您的expo應用程序，因為我們將進行一些本機更改。
• 安裝並按照本模塊中的說明進行操作。 這個模塊的好處是它暴露了javascript中的'hide'功能。

App的基本流程。

• App loading start =>靜態啟動畫面可見
• 屏幕可見，直到我們的javascript包未加載
• Bundle loads =>由SplashScreen組件的ComponentDidMount上的模塊公開的call hide函數
• Static Splash屏幕隱藏=>動畫啟動畫面可見，后台任務正常工作（緩存和API調用）
• 進一步的App流程

Answer 2

如果您正在談論啟動屏幕並且您沒有使用create-react-native-app ，則必須編輯每個平台的本機啟動屏幕以使用您的動畫。

如果您在Expo中使用create-react-native-app ，那么您可以查看Splash Screen API 。

Answer 3

自版本29以來的世博會支持動畫SVG和GIF。 它還提供了一個API，可以在沒有AppLoading情況下生成您自己的啟動畫面。

請檢查： https ： //docs.expo.io/versions/v29.0.0/sdk/splash-screen#example-without-apploading

Answer 4

世博團隊已完成：“改進的Splash Screen API”門票。 所以現在，您可以按照他們的文檔中所述進行操作： https ： //docs.expo.io/versions/v29.0.0/sdk/splash-screen/ ！