React Native 应用先显示白屏，然后进入应用

Posted 2023-03-15

【中文标题】React Native 应用先显示白屏，然后进入应用

【英文标题】：React Native app first shows white screen, then goes to app

【发布时间】：2018-08-28 09:08:54

【问题描述】：

我正在运行 React Native 0.56。当我启动我的应用程序时，它首先显示白屏 1 秒钟，然后转到应用程序。我的文件是：

public class MainApplication extends Application implements ReactApplication 

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) 
    @Override
    public boolean getUseDeveloperSupport() 
      return BuildConfig.DEBUG;
    

    @Override
    protected List<ReactPackage> getPackages() 
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new BlurViewPackage(),
          new OrientationPackage(),
          new ReactVideoPackage(),
          new RNDeviceInfo(),
          new LinearGradientPackage()
      );
    

    @Override
    protected String getJSMainModuleName() 
      return "index";
    
  ;

  @Override
  public ReactNativeHost getReactNativeHost() 
    return mReactNativeHost;
  

  @Override
  public void onCreate() 
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
  

和

public class MainActivity extends ReactActivity 

    /**
     * Returns the name of the main component registered from javascript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() 
        return "CONtv";
    

    @Override
      public void onConfigurationChanged(Configuration newConfig) 
        super.onConfigurationChanged(newConfig);
        Intent intent = new Intent("onConfigurationChanged");
        intent.putExtra("newConfig", newConfig);
        this.sendBroadcast(intent);
    

和index.js

import AppRegistry from 'react-native';
import App from './src/App';
import name as appName from './app.json';
AppRegistry.registerComponent(appName, () => App);

如何让白屏不出现？这发生在 android 上。

【问题讨论】：

这个“白屏”是“Powered by React Native”屏幕吗？如果是这样，这是预期的行为，并且在您安装构建的 apk 时不会发生。

@IshitaSinha 不，不是。

【参考方案1】：

作为白屏的解决方案，添加启动画面。

用这个https://android.jlelse.eu/the-complete-android-splash-screen-guide-c7db82bce565检查