启动画面反应原生之前的白屏

Question

我遇到一个问题，当我运行应用程序时，我的应用程序出现白屏并在启动画面前停留 2 秒，如何解决这个问题，我正在使用 React-native 版本 61，我需要删除出现在启动画面之前的白屏，它只出现了 2 秒但我需要删除它，我搜索并尝试了，

<item name="android:windowDisablePreview">true</item> in android 但是没有解决问题

这是我的代码“AppInitializer”

import React from 'react';
import {Alert} from 'react-native';
import AppNavigator from './router';
import SplashScreen from './SplashScreen';
import {InitializApp} from './actions/SettingsActions';
import {connect} from 'react-redux';
import NavigationService from './util/NavigationService';
import AsyncStorage from '@react-native-async-storage/async-storage';
import {fcmService} from './util/FCMService';
class AppInitializer extends React.Component {
  constructor(props) {
    super(props);
  }
  async componentDidMount() {
    /*************************************
     *       Push Notification
     *************************************/

    fcmService.requestPermission();
    await fcmService.registerAppWithFCM();
    await fcmService.register(
      onRegister,
      onNotification, // inapp notification
      onOpenNotification, // fron notification center
    );
    async function onRegister(token) {
      const oldDeviceToken = await AsyncStorage.getItem('deviceToken');
      if (oldDeviceToken != token) {
        await AsyncStorage.setItem('deviceToken', token);
        // await AsyncStorage.setItem('oldDeviceToken', oldDeviceToken);
      }
    }

    function onNotification(notify, data) {
      console.log('onNotification', notify);
      console.log('onNotification', data);
      let buttons = [];

      if (data.hasOwnProperty('type') && data.type == 'category') {
        buttons[0] = {
          text: 'إلغاء',
          onPress: () => console.log('Cancel Pressed'),
          style: 'cancel',
        };
        buttons[1] = {
          text: 'اذهب للقسم',
          onPress: () => {
            NavigationService.navigate('categorydetails', {
              category_id: data.id,
            });
          },
        };
      } else if (data.hasOwnProperty('type') && data.type == 'product') {
        buttons[0] = {
          text: 'إلغاء',
          onPress: () => console.log('Cancel Pressed'),
          style: 'cancel',
        };
        buttons[1] = {
          text: 'اذهب للمنتج',
          onPress: () => {
            NavigationService.navigate('productdetails', {
              product_id: data.id,
            });
          },
        };
      } else {
        buttons[0] = {
          text: 'موافق',
          onPress: () => console.log('Cancel Pressed'),
          style: 'cancel',
        };
      }
      Alert.alert(notify.title, notify.body, buttons, {cancelable: true});
    }

    function onOpenNotification(notify, data) {
      console.log('onOpenNotification', data);
      if (data.hasOwnProperty('type') && data.type == 'category') {
        NavigationService.navigate('categorydetails', {
          category_id: data.id,
        });
      } else if (data.hasOwnProperty('type') && data.type == 'product') {
        NavigationService.navigate('productdetails', {
          product_id: data.id,
        });
      } else {
        Alert.alert(
          notify.title,
          notify.body,
          [
            {
              text: 'موافق',
              onPress: () => console.log('Cancel Pressed'),
              style: 'cancel',
            },
          ],
          {cancelable: true},
        );
      }
    }
    /*************************************
     *       Push Notification
     *************************************/
    this.props.InitializApp();
  }
  render() {
    if (this.props.Loaded) {
      return (
        <AppNavigator
          ref={navigatorRef => {
            NavigationService.setTopLevelNavigator(navigatorRef);
          }}
        />
      );
    } else return <SplashScreen />;
  }
}

const mapStateToProps = state => ({Loaded: state.settings.Loaded});
const mapDispatchToProps = dispatch => ({
  InitializApp: () => dispatch(InitializApp()),
});
export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(AppInitializer);

Answer 1

您需要在启动画面对用户可见时执行此过程，此时渲染将无法显示任何内容，因此您什么也得不到，只有白屏...

请使用这个“npm i react-native-splash-screen --save”正确配置然后再次检查...

启动画面反应原生之前的白屏

White screen before splash screen react native

javascript

android

react-native

splash-screen