React Native Navigation v6与react-native-splash-screen(Android)兼容咨询
Absolutely! You can absolutely use react-native-splash-screen alongside React Native Navigation (RNN) v6 on Android—this combo still works perfectly, we just need to adjust the MainActivity.java setup since RNN v6 changed how the initial activity is structured. Let's break this down step by step:
1. Update MainActivity.java
Gone are the days of inheriting from SplashActivity for RNN. Instead, we'll extend RNN v6's base NavigationActivity and integrate the splash screen logic directly:
package com.yourappname; import android.os.Bundle; import com.reactnativenavigation.NavigationActivity; import org.devio.rn.splashscreen.SplashScreen; public class MainActivity extends NavigationActivity { @Override protected void onCreate(Bundle savedInstanceState) { // Show the splash screen FIRST, before initializing RNN SplashScreen.show(this); super.onCreate(savedInstanceState); } }
This way, we let react-native-splash-screen handle the splash display, while still leveraging RNN v6's core activity management.
2. Verify react-native-splash-screen core configuration
Make sure you have the standard splash screen resources and manifest setup in place:
- Create your splash screen layout (e.g.,
launch_screen.xml) inres/drawableorres/layoutwith your branding/design - Update
AndroidManifest.xmlto apply the splash theme to yourMainActivity:
<activity android:name=".MainActivity" android:label="@string/app_name" android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode" android:launchMode="singleTask" android:windowSoftInputMode="adjustResize" android:theme="@style/SplashScreenTheme"> <!-- Add this line --> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity>
- Define the
SplashScreenThemeinres/values/styles.xml:
<style name="SplashScreenTheme" parent="Theme.AppCompat.Light.NoActionBar"> <item name="android:windowBackground">@drawable/launch_screen</item> </style>
3. Hide the splash screen once your app is ready
Once your initial RNN screen has fully loaded, trigger the splash screen hide from your React Native code (usually in your root component's initialization):
import SplashScreen from 'react-native-splash-screen'; import { useEffect } from 'react'; function RootComponent() { useEffect(() => { // Hide splash screen after app initialization completes SplashScreen.hide(); }, []); // Your RNN navigation setup (e.g., Navigation.registerComponent) here }
Quick Troubleshooting Tips
- Always sync your Gradle files after modifying
MainActivity.javato avoid build errors - If the splash screen doesn't show, double-check that
SplashScreen.show(this)is called beforesuper.onCreate(savedInstanceState) - If the splash screen hangs, ensure you're calling
SplashScreen.hide()only after your app's initial content is ready (not too early in the lifecycle)
内容的提问来源于stack exchange,提问作者ofer2980

