Question

我有一个以列表形式呈现的项目的列表，并且正在为每个项目设置动画。

在构造函数中，我为动画分配值

Promise.all

所以我按索引渲染项目，以得到它们的不同值，如下所示：

constructor(props){
 super(props);
 this.state = { ... };

     this.height = new Animated.Value(SCREEN_WIDTH/1.8);   
     this.width = new Animated.Value(SCREEN_WIDTH/2.5);
}

然后当用户按下项目时为项目设置动画。索引= 0可以正确设置动画，但是索引= 1（我设置的新值根本没有设置动画），我不知道这有什么问题？你能解释一下我吗？

动画功能：

renderStyle
if(index == 0){
            return {
                marginRight: SCREEN_WIDTH / 35,
                marginLeft: SCREEN_WIDTH / 35,
                margin: SCREEN_WIDTH / 50,
                width: this.width,
                height: this.height,
                opacity: this.state.opacity,
                borderRadius: SCREEN_WIDTH / 36,
            }
        }

        if(index == 1){

            this.height.setValue(SCREEN_WIDTH/1.5);

            return {
                marginRight: SCREEN_WIDTH / 35,
                marginLeft: SCREEN_WIDTH / 35,
                margin: SCREEN_WIDTH / 50,
                width: this.width,
                height: this.height,
                opacity: this.state.opacity,
                borderRadius: SCREEN_WIDTH / 36,
            }
        }

渲染

返回

Animated.parallel([
            Animated.timing(this.width,{
                toValue: SCREEN_WIDTH/1.2,
                duration: 750
            }),
            Animated.timing(this.height,{
                toValue: SCREEN_HEIGHT/1.2,
                duration: 750
            }),
            Animated.timing(this.state.opacity,{
                toValue: 0,
                duration: 750
            }),
        ]).start(() => this.props.go(item));

        setTimeout(() => Actions.video({item: item}), 800);

这是一个不同的JS文件，因此flatlist在主页上工作，并且renderItem方法获取此JS文件中的值以便能够对其进行动画处理。

编辑：我找到了一个替代解决方案，但是无论如何，它仍然无法解释为什么设置值动画后不起作用。

setValue之后，React-Native动画无法正常工作

0 个答案: