启动画面在 React Native Android 上快速变为白色

Question

我在我的应用中添加了启动画面。启动画面会加载，但会在应用加载前大约 5 秒变白。我想在应用启动之前一直保持启动画面。

---

我尝试在 this question 上关注 Sooraj 的回答，但他们没有提供任何关于他们的答案的解释，因为它写在问题上。不起作用的主要部分是setContentView(R.layout.activity_splash); 行，当我尝试构建我的应用程序时会产生错误。当我删除该行时，我的应用程序在安装后崩溃

MainActivity.java

package com.sealsounds;

import android.content.Intent;
import android.os.Bundle;
import com.facebook.react.ReactActivity;
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
import com.sealsounds.SplashActivity;

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 "SealSounds";
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        Intent i = new Intent(this, SplashActivity.class);
        startActivity(i);
    }

    @Override
    protected ReactActivityDelegate createReactActivityDelegate() {
        return new ReactActivityDelegate(this, getMainComponentName()) {
            @Override
            protected ReactRootView createRootView() {
                return new RNGestureHandlerEnabledRootView(MainActivity.this);
            }
        };
    }
}

SplashActivity.java

package com.sealsounds;

import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;
import com.facebook.react.ReactActivity;
import com.facebook.react.ReactActivityDelegate;

public class SplashActivity extends ReactActivity {

    private static int SPLASH_TIME_OUT = 5000;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        Handler handler = new Handler();
        handler.postDelayed(new Runnable() {
            @Override
            public void run() {
                finish();
            }
        }, SPLASH_TIME_OUT);
    }
}

Answer 1

所以你面临这个问题的原因是：

 1. When  Javascript loads & the bridge is initialized.
 2. Then you see splash screen when the app is first booted up implemented on native side. 
 3. Now React Native initialize at that time we get a white
    screen for fraction of second

你可以按照这篇文章添加闪屏这是实现闪屏的正确方法splash-screen-in-react-native

Answer 2

我删除了在之前的实现中添加的代码，并重新开始实现启动画面。

这些说明是从react-native-splash-screen 的文档中修改的，如果您也想要 iOS 的说明，可以访问此链接

---

在命令行运行

yarn add react-native-splash-screen

编辑 MainActivity.java

...
//Splash Screen stuff
import android.os.Bundle; 
import org.devio.rn.splashscreen.SplashScreen;
// for react-native-splash-screen < 0.3.1 replace the line above with the line below
//import com.cboy.rn.splashscreen.SplashScreenReactPackage;

public class MainActivity extends ReactActivity {

    ...    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        SplashScreen.show(this);  // here
        super.onCreate(savedInstanceState);
    }
    ...
}

在 app/src/main/res/layout 中创建一个名为 launch_screen.xml 的文件（如果布局文件夹不存在，则创建它）。文件内容应如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/launch_screen" android:scaleType="centerCrop" />
</RelativeLayout>

创建您的启动屏幕图像并将其命名为launch_screen.png 将其复制到android/app/src/main/res 内的以下文件夹中

drawable
drawable-ldpi
drawable-mdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
drawable-xxxhdpi

将下面的行添加到您的主 App.js 文件中

import SplashScreen from 'react-native-splash-screen'

在您的主 App.js 类中，将以下内容添加到您的 ComponentDidMount() 函数中

export default class App extends React.Component {
    ...
    componentDidMount() {
        SplashScreen.hide();
    }
    ...
}