ReactNative启动白屏解决方案reactnativesplashscreen

安装

1.添加
yarn add react-native-splash-screen
2.自动link
react-native link
或者
react-native link react-native-splash-screen

修改原生代码

Android:

通过以下更改更新MainActivity.java以使用react-native-splash-screen:

import android.os.Bundle; // here
import com.facebook.react.ReactActivity;
// react-native-splash-screen >&＃61; 0.3.1
import org.devio.rn.splashscreen.SplashScreen; // here
// react-native-splash-screen <0.3.1
import com.cboy.rn.splashscreen.SplashScreen; // here public class MainActivity extends ReactActivity {&＃64;Overrideprotected void onCreate(Bundle savedInstanceState) {SplashScreen.show(this); // here super.onCreate(savedInstanceState);}// ...other code
}

iOS:

使用以下添加内容更新AppDelegate.m:

#import "AppDelegate.h"#import
#import
#import "SplashScreen.h" // here&＃64;implementation AppDelegate- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{// ...other code[SplashScreen show]; // herereturn YES;
}&＃64;end

配置资源文件

Android还需要配置一些资源文件

在app / src / main / res / layout中创建一个名为launch_screen.xml的文件&＃xff08;如果不存在&＃xff0c;则创建layout文件夹&＃xff09;。该文件的内容应如下所示:


<LinearLayout xmlns:android&＃61;"http://schemas.android.com/apk/res/android"android:orientation&＃61;"vertical" android:layout_width&＃61;"match_parent"android:layout_height&＃61;"match_parent"android:background&＃61;"&＃64;drawable/launch_screen">
LinearLayout>

在app / src / main / res / drawable中创建一个名为launch_screen的图片文件&＃xff08;如果不存在&＃xff0c;则创建drawable文件夹&＃xff09;。

通过创建launch_screen.png文件并将其放入适当的可绘制文件夹来自定义启动屏幕。Android会自动缩放drawable&＃xff0c;因此您不一定需要为所有手机密度提供图像。您可以在以下文件夹中创建启动画面:

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

在app / src / main / res / values / color.xml中添加一个名为primary_dark的颜色:


<resources><color name&＃61;"primary_dark">#000000color>
resources>

设置背景透明

如果不设置的&＃xff0c;还是会有一小段时间白屏。
打开android / app / src / main / res / values / styles.xml并将 true 添加到文件中。它应该看起来像这样:

<resources><style name&＃61;"AppTheme" parent&＃61;"Theme.AppCompat.Light.NoActionBar">-- Customize your theme here. -->--设置透明背景--><item name&＃61;"android:windowIsTranslucent">trueitem>style>
resources>

Android端结构图大致为&＃xff1a;

JS端代码&＃xff1a;

import SplashScreen from &＃39;react-native-splash-screen&＃39;export default class WelcomePage extends Component {componentDidMount() {// do stuff while splash screen is shown// After having done stuff (such as async tasks) hide the splash screenSplashScreen.hide();}
}