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

Question

I have been trying to achieve hiding (or slide up) my react native startup app top bar after 3 seconds, then have a button to press to show the top bar, but could not. I've searched online how to do it, but have not seen good solution for it. Please I need help here, the below is snippet code of what I tried doing but it did not work.

<HeaderHomeComponent /> is the top header I created and imported it in my Home screen

 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

This should help you get started in the right direction, you can use animation based on your preference to this code.

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 2

You were really close.

This is how it should be done:

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

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

Then inside the "return":

 {showHeader && <HeaderHomeComponent />}

As simple as that.

Answer 3

Instead of setTimeout use Animation. or Check this lib: https://www.npmjs.com/package/react-native-animated-hide-view or check below answers which might help you Hide and Show View With Animation in React Native v0.46.