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

Question

我一直在尝试在 3 秒后隐藏（或向上滑动）我的 React Native 启动应用程序顶部栏，然后按下按钮以显示顶部栏，但无法实现。我在网上搜索了如何做，但还没有找到好的解决方案。请在这里我需要帮助，下面是我尝试做的代码片段，但它没有用。

<HeaderHomeComponent /> 是顶部 header 我在主屏幕中创建并导入了它

const Home = () => {

    const camera = useRef();
    const [isRecording, setIsRecording] = useState(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 () => {
        if (isRecording) {
            camera.current.stopRecording();
        } else {
            setTimeout(() => setIsRecording && camera.current.stopRecording(), 23*1000);
            const data = await camera.current.recordAsync();
        }
    };

    setTimeout(()=> setShowHeader(false),3000);

    const DisplayHeader = () => {
        if(showHeader == true) {
            return <HeaderHomeComponent />
        } else {
            return null;
        }
    }

    // useEffect(() => {
    //     DisplayHeader();
    // }, [])
    

    return (
        <View style={styles.container}>
            <RNCamera 
                ref={camera}
                type={cameraType}
                flashMode={flashMode}
                onRecordingStart={() => setIsRecording(true)}
                onRecordingEnd={() => setIsRecording(false)}
                style={styles.preview}
            />
            
            <TouchableOpacity 
                style={styles.showHeaderButton} 
                onPress={() => {
                    setShowHeader(!showHeader);
                }}>
                <Button title='Show'  />
            </TouchableOpacity>

            
            <HeaderHomeComponent />

Answer 1

使用动画代替 setTimeout。要么检查这个库：https://www.npmjs.com/package/react-native-animated-hide-view 要么检查以下可能对您有帮助的答案

Answer 2

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

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'

  }
  
});

Answer 3

你们真的很亲密。

应该这样做：

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

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

然后在“return”里面：

 {showHeader && <HeaderHomeComponent />}

就这么简单。

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

How to hide top bar after 3 seconds in React Native

javascript

reactjs

react-native

react-navigation