Javascript 如何在React Native中3秒后隐藏顶部栏

我一直在尝试在3秒钟后隐藏（或向上滑动）我的react本机启动应用程序顶部栏，然后按下按钮以显示顶部栏，但无法。我已经在网上搜索了如何做到这一点，但还没有找到好的解决方案。请告诉我这里需要帮助，下面是我尝试做的事情的代码片段，但它不起作用

是我在主屏幕中创建并导入的顶部标题

const Home=（）=>{
const-camera=useRef（）；
const[isRecording，setIsRecording]=使用状态（false）；
const[flashMode，setFlashMode]=useState（RNCamera.Constants.flashMode.off）；
const[cameraType，setCameraType]=useState（RNCamera.Constants.Type.front）；
const[showHeader，setShowHeader]=useState（true）；
const onRecord=async（）=>{
如果（isRecording）{
camera.current.stopRecording（）；
}否则{
setTimeout（（）=>setIsRecording&&camera.current.stopRecording（），23*1000）；
const data=wait camera.current.recordAsync（）；
}
};
setTimeout（（）=>setShowHeader（false），3000）；
const DisplayHeader=（）=>{
如果（showHeader==true）{
返回
}否则{
返回null；
}
}
//useffect（（）=>{
//DisplayHeader（）；
// }, [])
返回(
setIsRecording（真）}
onRecordingEnd={（）=>setIsRecording（false）}
style={style.preview}
/>
{
设置showHeader（！showHeader）；
}}>

使用动画代替设置超时。 或 检查此库： 或 检查以下可能对您有帮助的答案

---

这将帮助您从正确的方向开始，您可以根据自己对该代码的偏好使用动画

import React, {useState, useEffect} from 'react';
import { Text, View, StyleSheet, Button } from 'react-native';
import Constants from 'expo-constants';



export default function App() 
{


  const [showStatusbar, setShowStatusbar] = useState(true)

  useEffect(() => 
  {
    setTimeout(() => 
    {
      setShowStatusbar(false)
    }, 3000)

  }, [])

  return (
    <View style={styles.container}>
        
        {
          showStatusbar 
          ? <View style = {styles.statusBar}>
              <Text>Status Bar</Text>
            </View>
          : null
        }
        

        <Button title = "Show Status bar" onPress = {() => setShowStatusbar(true)}/>
     
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ecf0f1',
  },
  statusBar:
  {
    height: 50,
    backgroundColor:'lightblue',
    justifyContent:'center',
    alignItems:'center'

  }
  
});

import React，{useState，useffect}来自“React”；
从“react native”导入{文本、视图、样式表、按钮}；
从“expo常量”导入常量；
导出默认函数App（）
{
常量[showStatusbar，setShowStatusbar]=useState（真）
useffect（（）=>
{
设置超时（（）=>
{
设置显示状态栏（错误）
}, 3000)
}, [])
返回(
{
显示状态栏
? 
状态栏
：null
}
setShowStatusbar（真）}/>
);
}
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“#ecf0f1”，
},
状态栏：
{
身高：50，
背景颜色：'浅蓝色'，
辩护内容：'中心'，
对齐项目：'center'
}
});

你真的很接近

应该这样做：

useEffect(() => {
    setTimeout(toggleHeader,3000);
}, []);

const toggleHeader = () => setShowHeader(prev => !prev);

然后在“返回”中：

{showHeader&&}

---

就这么简单。

谢谢你的回答，我试过了，效果不错，但需要有一个按钮来显示/切换标题。

 {showHeader && <HeaderHomeComponent />}