react-native-splash-screen

www.npmjs.com/package/rea…

安装

• 安装包

yarn add react-native-splash-screen

• 自动安装

react-native link react-native-splash-screen or rnpm link react-native-splash-screen

注意：自动安装会少很多配置，请检查，建议手动安装

• 手动安装（Android）

• • 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')

• • android/app/build.gradle

...
dependencies {
    ...
    implementation project(':react-native-splash-screen')
}

• • MainApplication.java

在头部引入包，如下：

import org.devio.rn.splashscreen.SplashScreenReactPackage;

在getPackages中加入如下代码，（可以不加，我就没加，加了报错在删掉）

@Override
protected List<ReactPackage> getPackages() {
    @SuppressWarnings("UnnecessaryLocalVariable")
    List<ReactPackage> packages = new PackageList(this).getPackages();
    // Packages that cannot be autolinked yet can be added manually here, for example:
    // packages.add(new MyReactNativePackage());
    packages.add(new SplashScreenReactPackage()) // here
        return packages;
}

• • MainActivity.java
    在头部引入

package com.awesomeproject;

import com.facebook.react.ReactActivity;
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import android.os.Bundle; // here
import org.devio.rn.splashscreen.SplashScreen; // here

public class MainActivity extends ReactActivity {

在添加函数

• • 创建一个名为launch_screen.xml的文件在android/app/src/main/res/layout文件夹下（layout如果不存在，则创建文件夹）

<?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>

• • 在android/app/src/main/res目录结构下创建如下文件夹

• • • drawable（自带）

• • • drawable-mdpi

• • • drawable-hdpi

• • • drawable-xhdpi

• • • drawable-xxhdpi

• • • drawable-xxxhdpi

• • 在每个文件夹放入图片，注意图片名称为launch_screen

• • 在需要关闭的页面引入使用即可，一般为App.js

import { StyleSheet, Text, View } from 'react-native'
import React, { useEffect } from 'react'
import SplashScreen from 'react-native-splash-screen'

const App = () => {

  useEffect(() => {
    let timer = setTimeout(() => {
      SplashScreen.hide();
    }, 2000)

    return () => {
      clearTimeout(timer)
    }
  }, [])

  return (
    <View>
      <Text>App</Text>
    </View>
  )
}

export default App

const styles = StyleSheet.create({})

打包报错

Execution failed for task ':app:mergeReleaseResources'.

解决方法一：

在app/build.gradle文件中加以下代码，以关闭Android Studio的PNG合法性检查。

....
android {
...
aaptOptions.cruncherEnabled = false
aaptOptions.useNewCruncher = false
...
}
....

在执行一下命令

cd .\android\
.\gradlew clean

解决方法二：

只需要将图片复制出来，然后右键使用画图编辑，保存为PNG格适即可。

解决方法三：

该图片的后缀为.png，重命名该图片的后缀为.jpg。

参考链接：blog.csdn.net/weixin_4273…