我有一个平行动画如下。
Animated.parallel(
[
Animated.timing(this.translateAnimatedValue, {
toValue: 100,
duration: 500,
useNativeDriver: Platform.OS == 'android'
}),
Animated.timing(this.opacityAnimatedValue, {
toValue: 1,
duration: 500,
useNativeDriver: Platform.OS == 'android'
})
])
.start();
它适用于我的组件。
return (
<Animated.View style={{ opacity: this.opacityAnimatedValue, transform: [{ translateY: this.translateAnimatedValue }] }}>
<View>
{children}
</View>
</Animated.View>
);
但是我不希望父组件消失。只需要隐藏 child 。因此,当我将代码更改为以下内容时,应用程序崩溃了。
return (
<Animated.View style={{ transform: [{ translateY: this.translateAnimatedValue }] }}>
<View style={{ opacity: this.opacityAnimatedValue }}>
{children}
</View>
</Animated.View>
);
我也把动画分开试过了。但是,它也会使应用程序崩溃
Animated.timing(this.translateAnimatedValue, {
toValue: 100,
duration: 500,
useNativeDriver: Platform.OS == 'android'
}).start();
Animated.timing(this.opacityAnimatedValue, {
toValue: 1,
duration: 500,
useNativeDriver: Platform.OS == 'android'
}).start();
我希望容器进行翻译并且文本出现/消失。 如何实现这种行为?
最佳答案
您忘记添加 Animated.
前缀到您的 View
。
替换这个:
<View style={{ opacity: this.opacityAnimatedValue }}>
{children}
</View>
用这个:
<Animated.View style={{ opacity: this.opacityAnimatedValue }}>
{children}
</Animated.View>
关于父子组件的 React-Native 并行动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58505010/