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函数以异步方式工作，状态值在更新后不会立即可用，并且每次调用setState时React都会重新渲染所有组件和子组件。如果要在设置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));
})

反应本地动画无法正常工作

1 个答案: