react-native - 加载前启动屏幕白色闪烁(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>
    )

  }
}

});

应用程序.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

启动画面闪烁是因为您想在启动画面加载后立即更改应用程序的状态。我建议你使用 AppLoading从世博会，这控制了启动画面的可见性。

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