react-native-splash-screen安装及建立链接

潘刚洁
2023-12-01

一、下载 react-native-splash-screen --save

npm i react-native-splash-screen --save

二、自动安装终端链接

react-native link react-native-splash-screen 
或 
rnpm link react-native-splash-screen

三、手动安装终端链接

1.在 android/settings.gradle 文件中添加下列代码:

include ':react-native-splash-screen'
project(':react-native-splash-screen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-splash-screen/android')

2.在 android/app/build.gradle 文件中添加 :react-native-splash-screen

dependencies {
    implementation project(':react-native-splash-screen') // 新增
}

3.更新MainApplication.java 文件

import org.devio.rn.splashscreen.SplashScreenReactPackage; //新增
官方文档需要增加:new SplashScreenReactPackage() ,在RN0.68+版本中无需增加以下代码(自测)
@Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                    new MainReactPackage(),
            new SplashScreenReactPackage()  //添加这一句
            );
        }
        

4.更新 MainActivity.java 文件如下:

import android.os.Bundle;
import org.devio.rn.splashscreen.SplashScreen; 
public class MainActivity extends ReactActivity {
	@Override
 	 protected void onCreate(Bundle savedInstanceState) {
      		SplashScreen.show(this);
      		super.onCreate(savedInstanceState);
 	 }
}

四、使用

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

五、launch_screen文件新增及配置:android\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-hdpi
drawable-ldpi
drawable-mdpi
drawable-xhdpi
drawable-xxhdpi
drawable-xxxhdpi
 类似资料: