目前，我正在努力处理出现和消失的动画。 我的目标是对 View 进行动画进出。但我还希望 View 在动画后 100% 消失
想法
...
const visible: boolean = props.visible || false;
const [showView, setShowView] = useState<boolean>(visible);
const viewAnimation = useRef<Animatable.View & View>(null);
useEffect(() => {
const Animation = async () => {
if (visible) {
setShowView(true);
if (viewAnimation.current)
await viewAnimation.current.bounceIn(2000);
} else {
if (viewAnimation.current)
await viewAnimation.current.bounceOut(2000);
setShowView(false)
}
}
Animation();
}, [visible, viewAnimation]);
...
{showView &&
<Animatable.View ref={viewAnimation}>
...
</Animatable.View>
}
...
问题 viewAnimationRef 在下一个渲染周期中设置，而不是在将 showView 设置为 true 后立即设置 ->bounceIn 动画永远不会被执行..因为 viewAnimation.current 为 null..
我正在使用:
- react 原生0.62
- react-native-animable 1.3.3
也许某人知道如何解决这个问题^^
谢谢
最佳答案
解决方案很简单，只需将 Animatable.View 包裹在普通 View 周围，如果你想隐藏它，就隐藏普通 View
示例:
...
const visible: boolean = props.visible || false;
const [showView, setShowView] = useState<boolean>(visible);
const viewAnimation = useRef<Animatable.View & View>(null);
useEffect(() => {
const Animation = async () => {
if (visible) {
setShowView(true);
if (viewAnimation.current)
await viewAnimation.current.bounceIn(2000);
} else {
if (viewAnimation.current)
await viewAnimation.current.bounceOut(2000);
setShowView(false)
}
}
Animation();
}, [visible, viewAnimation]);
...
<Animatable.View ref={viewAnimation}>
{showView &&
<View>
...
</View>
}
</Animatable.View>
...
关于reactjs - React-Native Animate 查看进出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62689828/