如何在 React Native 中自动隐藏和显示组件

问题描述

在我的主屏幕中，我想在 2 秒内自动隐藏我的标题，然后我将有一个按钮在按下时显示标题。我尝试过 HomeStack.Screen 但无法实现，我必须创建名为 HeaderHomeComponent.js 的自定义标头并将其导入到我的主屏幕上，但仍然无法实现。请我在这个问题上需要帮助。

这是我的代码：

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();
        }
    };

    const visibility = () => {
        setTimeout(() => setShowHeader(false),2000);
    }
    


    return (
        <View style={styles.container}>
            <RNCamera 
                ref={camera}
                type={cameraType}
                flashMode={flashMode}
                onRecordingStart={() => setIsRecording(true)}
                onRecordingEnd={() => setIsRecording(false)}
                style={styles.preview}
            />
            
            
            <HeaderHomeComponent />

解决方法

你需要像Mindaugas Nakrosis在评论中提到的那样做

  const [showHeader,setShowHeader] = useState(true);
    
    useEffect(() => {
        setTimeout(() => setShowHeader(false),2000);
        },[]);
    

作为回报，您的标头所在

{
    showHeader && <HeaderHomeComponent/>;
} 

,

我认为该方法适合“在 2 秒内自动隐藏和显示”，使用 Animetad 不透明度，并为元素提供固定高度或/和 z-index（适合您）

  // HeaderHomeComponent.js 

  const animOpacity = useRef(new Animated.Value(1)).current // start with showing elem


  //change main view to

   <Animated.View
    style={{ ...yourStyle...,opacity: animOpacity,}}
    > 

然后在某处创建动画

     () => {
         Animated.timing(animOpacity,{
         toValue: +(!animOpacity),// the numeric value of not current
         duration: 2000,// 2 secs
         }).start();
    }}

ref 声明的层次位置应该控制调用效果的用法。也许您可以在标头中创建 useEffect 来确定它是否应该可见，这取决于导航或其他一些道具。

希望对您有所帮助！