如何在react-native-modal组件将卸载中完成模态动画？
我正在寻找一种解决方案来延迟 RN 组件卸载，直到 react-native-modal animationOut 完成。该动画通过设置 isVisible=false 来触发。 在我当前的实现中，动画在 componentWillMount 挂钩上按预期执行，但问题出在 componentWillUnmount 中，警报在没有动画的情况下卸载。我怀疑这是因为组件在动画发生更改之前就已卸载。 这是警报组件：
//modal component
import Modal from "react-native-modal";
export default CustomAlert = props => {
const [isVisible, setIsVisible] = useState(false);
useEffect(() => {
setIsVisible(true)
return () => setIsVisible(false);
}, [])
return (
<Modal
isVisible={isVisible}
animationIn={'slideInUp'}
animationOut={'slideOutDown'}
>
<View
...
</View>
</Modal>
)
};
以下是自定义警报的使用方式：
export default ApplicationScreen = ({ navigation }) => {
const [alert, setAlert] = useState(null);
...
const doSomething = () => {
...
//show alert
setAlert({ title: 'title', message: 'message'});
...
//hide alert
setAlert(null);
...
}
...
return (
<SafeAreaView style={styles.container}>
{alert &&
<CustomAlert
title={alert?.title}
message={alert?.message}
...
/>
}
...
</SafeAreaView>
)
}
I am looking for a solution to delay RN component unmount until react-native-modal animationOut is completed. This animation is triggered by setting isVisible=false.
With my current implementation the animation performs as expected on componentWillMount hook, however the problem is in componentWillUnmount the alert unmounts without an animation. I suspect this is because the component unmounts before the animation even has a change to start.
Here's the alert component:
//modal component
import Modal from "react-native-modal";
export default CustomAlert = props => {
const [isVisible, setIsVisible] = useState(false);
useEffect(() => {
setIsVisible(true)
return () => setIsVisible(false);
}, [])
return (
<Modal
isVisible={isVisible}
animationIn={'slideInUp'}
animationOut={'slideOutDown'}
>
<View
...
</View>
</Modal>
)
};
Here's how the custom alert needs to be used:
export default ApplicationScreen = ({ navigation }) => {
const [alert, setAlert] = useState(null);
...
const doSomething = () => {
...
//show alert
setAlert({ title: 'title', message: 'message'});
...
//hide alert
setAlert(null);
...
}
...
return (
<SafeAreaView style={styles.container}>
{alert &&
<CustomAlert
title={alert?.title}
message={alert?.message}
...
/>
}
...
</SafeAreaView>
)
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
问题是您在条件渲染中包含
CustomAlert。一旦警报设置为 false，Modal 将直接下马。您可以将
alert状态作为属性传递到CustomAlert中，然后传递到Modal中。的属性isVisible将为您处理带有动画的模态渲染。应用程序屏幕：
在自定义警报中：
The problem is that you are containing the
CustomAlertin a conditional rendering. Once the alert is set to false, the Modal would dismount directly.You could pass the
alertstate intoCustomAlertas property and then intoModal. The 's propertyisVisiblewould hanlde the render of the modal for you with animation.ApplicationScreen:
in CustomAlert: