如何解决如何在 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
来确定它是否应该可见,这取决于导航或其他一些道具。
希望对您有所帮助!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。