如何在 react native 中实现安卓的斜杠屏幕?

Question

我正在使用这个库react-native-bootsplash来自 https://github.com/zoontek/react-native-bootsplash ，我做了这些步骤：

我编辑了android/build.gradle文件：

buildscript {
ext {
buildToolsVersion = "31.0.0"
minSdkVersion = 23 // <- AndroidX splashscreen has basic support for 21 (only the background color), so 23 is best
compileSdkVersion = 31 // <- set at least 31
targetSdkVersion = 31 // <- set at least 31

然后编辑你的android/app/build.gradle文件：

dependencies {
// …
implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0"
implementation "androidx.core:core-splashscreen:1.0.0" // Add this line
// …

编辑您的android/app/src/main/res/values/styles.xml文件：

<resources>
<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
<!-- Your base theme customization -->
</style>
<!-- BootTheme should inherit from Theme.SplashScreen -->
<style name="BootTheme" parent="Theme.SplashScreen">
<item name="windowSplashScreenBackground">@color/bootsplash_background</item>
<item name="windowSplashScreenAnimatedIcon">@mipmap/bootsplash_logo</item>
<item name="postSplashScreenTheme">@style/AppTheme</item>
</style>
</resources>

编辑您的android/app/src/main/AndroidManifest.xml文件：

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.rnbootsplashexample">
<!-- … -->
<application
android:name=".MainApplication"
android:label="@string/app_name"
android:icon="@mipmap/ic_launcher"
android:roundIcon="@mipmap/ic_launcher_round"
android:allowBackup="false"
android:theme="@style/BootTheme"> <!-- Replace @style/AppTheme with @style/BootTheme -->
<!-- … -->
</application>
</manifest>

最后编辑您的android/app/src/main/java/com/yourprojectname/MainActivity.java文件：

// …
// Add these required imports:
import android.os.Bundle;
import com.zoontek.rnbootsplash.RNBootSplash;
public class MainActivity extends ReactActivity {
// …
@Override
protected void onCreate(Bundle savedInstanceState) {
RNBootSplash.init(this); // <- initialize the splash screen
super.onCreate(savedInstanceState); // or super.onCreate(null) with react-native-screens
}
}

但它不会在初始屏幕中显示图标

Answer 1

1. 您应该使用yarn react-native generate-bootsplash <logoPath>生成图标(如果没有)
2. 使用cd android && ./gradlew clean && cd ..清理构建文件夹 在运行应用之前。