加載前啟動畫面白色閃爍（React Native Expo）

Question

當應用程序加載時，有一個白色背景，然后在顯示初始屏幕之前閃爍。 我已經從 app.json 文件中刪除了啟動畫面，因為我手動加載和隱藏啟動畫面。 （將啟動畫面留在 app.json 文件中會導致顯示啟動畫面，然后出現白色閃爍，然后再次顯示啟動畫面）

應用程序.js

import React from 'react';
import { StyleSheet, View, Image } from 'react-native'
import { MyAuthStack, MyMainDrawer } from './Screens/Navigators'
import firebase from './firebase'
import { AppLoading, SplashScreen } from 'expo';
import { Asset } from 'expo-asset';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      authState: false,
      imgUrl: '',
      isSplashReady: false,
      isAppReady: false,
    }

  }
  _cacheSplashResourcesAsync = async () => {
    const gif = require('./assets/splash.png');
    return Asset.fromModule(gif).downloadAsync();
  }

  _cacheResourcesAsync = async () => {
    SplashScreen.hide();

    const images = [
      require('./assets/addthreadicon.png'),
      require('./assets/500x500.png'),
    ];
    const cacheImages = images.map((image) => Asset.fromModule(image).downloadAsync());

    await Promise.all(cacheImages);
    firebase.auth().onAuthStateChanged(user => {
      if (user != null) {
        const userRef = firebase.database().ref(`users/${firebase.auth().currentUser.uid}/img`)
        userRef.once('value', snapshot => {
          this.setState({ imgUrl: snapshot.val(), authState: true, isAppReady: true })
        })
      } else {
          this.setState({ imgUrl: '', authState: false, isAppReady: true })
      }
    })
  };
  render() {
    const { isSplashReady, isAppReady, authState } = this.state;
    if (!isSplashReady) {
      return (
        <AppLoading
          startAsync={this._cacheSplashResourcesAsync}
          onFinish={() => this.setState({ isSplashReady: true })}
          onError={process.env.NODE_ENV === 'production' ? undefined : console.warn /* eslint-disable-line no-console */}
          autoHideSplash={false}
        />
      );
    }
    return (
      <View style={{ flex: 1 }}>
        {!isAppReady ? (
          <Image
            source={require('./assets/splash.png')}
            onLoad={this._cacheResourcesAsync}
            style={{ width: '100%', height: '100%' }}
          />
        ) : (
            <View style={{ flex: 1 }}>
              {authState ? (<MyMainDrawer imgUrl={this.state.imgUrl} />) : (<MyAuthStack />)}
            </View>
          )
        }
      </View>
    )

  }
}

});

app.json

{
  "expo": {
    "name": "Blank Template",
    "slug": "movie",
    "privacy": "public",
    "sdkVersion": "36.0.0",
    "platforms": [
      "ios",
      "android",
      "web"
    ],
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "android": {
      "package": "com.saim.moviethreads",
      "versionCode": 1,
      "config": {
        "googleMobileAdsAppId": "" 
      }
    },
    "ios": {
      "supportsTablet": true,
      "bundleIdentifier": "com.yourcompany.yourappname",
      "buildNumber": "1.0.0"
    }

  }
}

Answer 1

啟動畫面閃爍是因為您想在啟動畫面加載后立即更改應用程序的 state。 我建議你使用AppLoading中的 AppLoading，這可以控制啟動畫面的可見性。

<AppLoading
   startAsync={*function to load when splash screen starts*}
   onFinish={set the state to finished here}
/>