加载前启动画面白色闪烁（React Native Expo）

Posted 2023-03-06

【中文标题】加载前启动画面白色闪烁（React Native Expo）

【英文标题】：Splash Screen white flicker before loading (React Native Expo)

【发布时间】：2020-08-18 07:47:11

【问题描述】：

当应用程序加载时，会出现白色背景，然后在显示初始屏幕之前会闪烁。我已经从 app.json 文件中删除了启动画面，因为我手动加载和隐藏启动画面。 （将启动画面保留在 app.json 文件中会导致启动画面显示后出现白色闪烁，然后再次显示启动画面）

App.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"
    

  

【参考方案1】：

启动画面闪烁是因为您想在启动画面加载后立即更改应用程序的状态。我建议你使用 expo 中的AppLoading，它可以控制启动画面的可见性。

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