父子组件的 React-Native 并行动画

Question

我有一个平行动画如下。

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();

我希望容器进行翻译并且文本出现/消失。如何实现这种行为？

Answer 1

您忘记添加 Animated. 前缀到您的 View。

替换这个:

 <View style={{ opacity: this.opacityAnimatedValue }}>
     {children}
 </View>

用这个:

 <Animated.View style={{ opacity: this.opacityAnimatedValue }}>
     {children}
 </Animated.View>