如何使启动画面显示 5 秒然后在 React Native 中消失

Question

我正在创建一个启动屏幕组件，我想在应用首次启动至少 5 秒时运行该组件，然后显示另一个组件/屏幕。

我昨天刚开始使用 react-native，所以我仍然不知道如何在不引起错误的情况下做这样的复杂事情。我设法让它在应用程序打开后出现，但它只显示一瞬间。

这是我的代码：

App.js

const App = () => { 

   const [isFirstLaunch, setIsFirstLaunch] = React.useState(null);

   useEffect(() => {
      AsyncStorage.getItem('alreadyLaunched').then(value => {
          if(value == null){
            
            AsyncStorage.setItem('alreadyLaunched','true');
            setIsFirstLaunch(true);
          }else{
            setIsFirstLaunch(false);
          }
      })
   },[]);

 
  
   if (isFirstLaunch == null){
     return (
       <SplashScreen/>
     )
   }else if(isFirstLaunch == true){
    return (
      <NavigationContainer>
       
        <Drawer.Navigator initialRouteName="Dashboard">
        
         <WelcomeStack.Screen name="Welcome" component={WelcomeScreen}/>
         <WelcomeStack.Screen name="Login" component={LoginScreen}/>
         </Drawer.Navigator>
      
     </NavigationContainer>
           
         )
   }else{
    return (
      <NavigationContainer>
       
        <Drawer.Navigator initialRouteName="Dashboard">
           <Drawer.Screen name="Dashboard" component={LandingScreen} options={{ swipeEnabled:false

           }} />
         
         </Drawer.Navigator>
      
     </NavigationContainer>
           
         )
   }
    
 };
export default App;

SplashScreen.js

const SplashScreen = () => {

    return (
        
      <View style={styles.container}>
          <View style={styles.header}>
            <Image source ={require('../assets/Dilmune-logo1.png')}
            style={styles.logo}
            resizeMode="stretch"
            />
          </View>
      </View>
    );
  };

export default SplashScreen;

Answer 1

沿着这条线尝试一些东西

    const [showSplash, setShowSplash] = useState(true);
     useEffect(() => {
      AsyncStorage.getItem('alreadyLaunched').then(value => {
          if(value == null){
             setTimeout(() => {
          setShowSplash(false)
        },5000)
            AsyncStorage.setItem('alreadyLaunched','true');
            setIsFirstLaunch(true);
          }else{
            setIsFirstLaunch(false);
          }
      })
   },[]);
    
  

    if (isFirstLaunch == null && showSplash){
         return (
           <SplashScreen/>
         )
       } add  

Answer 2

你可能需要在你的 App 组件上使用类似的东西：

useEffect(()=>{
const timeout = useTimeout(()=> setShowSplash(false),5000)
return () => clearTimeout(timeout)
}, [])

然后，您相应地渲染启动画面或应用程序。