React本地动画无法按预期工作

Question

我有问题，希望有所帮助。因此，当按下时，我有多个接触式或按钮向下移动。我正在使用相同的方法来移动所有按钮，并使用按下哪个按钮，我正在使用状态变量。这是问题出现的地方，如果我按下第一个按钮，它按预期工作，但是当我按第二个按钮时，它只会重置位置，但不会移动。我发现的另一件事是，如果我从最后一个按钮开始按预期工作。我已经发布了我的代码。任何帮助都将不胜感激。

import React from 'react';
import {
  View,
  TouchableOpacity,
  Animated,
  Easing,
} from 'react-native';
class Barakhari extends React.Component {

constructor() {
    super();
    this.animatedValue = new Animated.Value(0);
    this.state = {
      i: null
    };
  }
  drop(x) {
    console.log('b4 press:', this.state.i)
    this.animatedValue.setValue(0);
    this.setState({ i : x})
    Animated.timing(this.animatedValue, {
      toValue: 1,
      duration: 500,
      easing: Easing.ease
    }).start(() =>console.log('after press:', this.state.i));
  }
  render() {
    const top = this.animatedValue.interpolate({
      inputRange: [0, 1],
      outputRange: [0, 100]
    });
    return (
        <View
          style={{
            height: '100%',
            width: '100%',
            borderWidth: 1,
            borderColor: 'red'
          }}
        >
          <View
            style={{
              height: '10%',
              width: '100%',
              borderWidth: 1,
              borderColor: 'white',
              flexDirection: 'row',
              alignItems: 'center',
              justifyContent: 'space-evenly'
            }}
          >
            <TouchableOpacity onPress={() => this.drop(1)}>
              <Animated.View
                style={{ top: this.state.i === 1 ? top : 0, height: 40, width: 40, backgroundColor: 'red' }}
              />
            </TouchableOpacity>
            <TouchableOpacity onPress={() => this.drop(2)}>
              <Animated.View
                style={{ top: this.state.i === 2 ? top : 0, height: 40, width: 40, backgroundColor: 'green' }}
              />
            </TouchableOpacity>
            <TouchableOpacity onPress={() => this.drop(3)}>
              <Animated.View
                style={{ top: this.state.i === 3 ? top : 0, height: 40, width: 40, backgroundColor: 'blue' }}
              />
            </TouchableOpacity>
          </View>
        </View>
        );
      }
    }
export { Barakhari };

Answer 1

在代码中找到一个问题，它可能会有所帮助：）

setState React中的函数以异步方式起作用，在更新和 React重新渲染所有组件和子组件后，每次调用setState时，状态值都不会立即可用。如果要在设置state之后使用更新值，则可以使用完成处理程序

drop(x) {
    console.log('b4 press:', this.state.i)
    this.animatedValue.setValue(0);
    this.setState({ i : x},()=>{
        Animated.timing(this.animatedValue, {
        toValue: 1,
        duration: 500,
        easing: Easing.ease
    }).start(() =>console.log('after press:', this.state.i));
})