Question

当应用加载时，背景为白色，然后闪烁，显示初始屏幕。我已从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"
    }

  }
}

Answer 1

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

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

加载前启动屏幕闪烁白色（React Native Expo）

1 个答案: