React Native（Android&iOS）自定义动画Splash Screen组件接入咨询

Hey there! Let’s walk through how to get your custom animated SplashScreen component up and running as your app’s official launch screen. The exact steps depend on what platform you’re building for, so I’ll cover the most common scenarios with practical examples:

React Example #

First, make sure your animated component is polished and ready. Then, in your root entry file (like index.js), render the SplashScreen before your main app—use state to control when to switch over:

import { useState, useEffect } from 'react';
import SplashScreen from './components/SplashScreen';
import App from './App';

function Root() {
  const [showSplash, setShowSplash] = useState(true);

  useEffect(() => {
    // Either wait for your animation to finish (listen for an event) or use a fixed delay
    const timer = setTimeout(() => {
      setShowSplash(false);
    }, 3000); // Match your animation's total duration

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

  return showSplash ? <SplashScreen /> : <App />;
}

export default Root;

Pro tip: To avoid a white flash before React mounts, add a static splash div in your index.html that matches your component’s initial state—this gets replaced once your React component loads.

Vue Example #

Use a conditional render in your App.vue to show the splash screen first, and let the component emit an event when its animation ends:

<template>
  <div id="app">
    <SplashScreen v-if="showSplash" @animation-finished="showSplash = false" />
    <router-view v-else />
  </div>
</template>

<script>
import SplashScreen from './components/SplashScreen.vue';

export default {
  components: { SplashScreen },
  data() {
    return {
      showSplash: true
    };
  }
};
</script>

React Native requires two parts: a native static launch screen (to avoid a blank screen while JS loads) and your animated component.

1. First, set up the native launch screen:
   • On Android: Edit launch_screen.xml to match your component’s initial frame.
   • On iOS: Update LaunchScreen.storyboard to mirror the first state of your animation.
2. Then, render your SplashScreen as the initial route in your navigator:

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import SplashScreen from './components/SplashScreen';
import HomeScreen from './screens/HomeScreen';

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Splash">
        <Stack.Screen 
          name="Splash" 
          component={SplashScreen} 
          options={{ headerShown: false }} 
        />
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

In your SplashScreen component, after the animation finishes, call navigation.replace('Home') to switch to the main screen (this prevents users from navigating back to the splash).

If you’re building a native Android app, turn your component into a splash activity:

1. Create a SplashActivity that hosts your animated view (either a custom View or Jetpack Compose component).
2. Set this as the launcher activity in AndroidManifest.xml:

<activity
    android:name=".SplashActivity"
    android:theme="@style/SplashTheme">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
</activity>
<activity android:name=".MainActivity" />

3. In SplashActivity, trigger the switch to MainActivity once the animation completes:

// Jetpack Compose example
class SplashActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyAppTheme {
                SplashScreen(onAnimationComplete = {
                    startActivity(Intent(this, MainActivity::class.java))
                    finish() // Close the splash activity so it's not in the back stack
                })
            }
        }
    }
}

Note: Use a SplashTheme with windowBackground set to your splash’s initial frame to avoid a blank screen during activity startup.

• Match Initial Frames: Always make sure your native/static launch screen matches the first frame of your animated component—this eliminates jarring transitions.
• Prioritize Animation Completion: Whenever possible, trigger the switch to the main app when the animation finishes (instead of fixed delays) for a smoother experience.
• Optimize Performance: Keep your splash animations lightweight—heavy animations can slow down app launch times, which hurts user experience.

内容的提问来源于stack exchange，提问作者AloeVera