-1

在我的主屏幕上，我想在 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 />

4

2 回答 2

1

您需要像评论中提到的 Mindaugas Nakrosis 那样做这样的事情

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

作为回报，您的标题所在的位置

{
    showHeader && <HeaderHomeComponent/>;
}
于 2021-01-09T15:00:49.870 回答
0

我认为该方法将适合“自动隐藏并在 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在标题中创建可以确定它是否应该可见的标题，这取决于导航或其他一些道具。

希望它有帮助！

于 2021-01-09T15:09:27.590 回答