在 React Native 上启动画面很快变成白色 Android

Question

我在我的应用程序中添加了启动画面。初始屏幕加载但随后在应用程序加载之前变为白色约 5 秒。我想在应用程序出现之前让启动画面一直保持下去。

我尝试按照 Sooraj 在 this question 上的回答进行操作，但他们没有对他们的回答提供任何解释，因为它写在问题上是行不通的。不起作用的主要部分是 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

的说明，可以访问此 link

在命令行上运行

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 class 中将以下内容添加到您的 ComponentDidMount() 函数

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

在 React Native 上启动画面很快变成白色 Android

Splash Screen quickly turns to white on React Native Android

android

splash-screen

reactjs

react-native