setState 后的新动画 - React Native

Question

我没有为我的 React 本机应用程序找到问题的答案。

如果您知道如何实现它，那就太好了:)

我想做什么：

在一个页面中，当我按下某个地方时，我想在按下的位置显示一个动画（例如一个方形幻影）。

我的收获： 当我单击时，会在正确位置显示一个带有动画的正方形。但是当我点击其他地方时，方块的位置会改变但动画不会重新开始。

我试过的：

为了制作动画，我在按下位置放置了一个（位置：'absolute'）。

此嵌入到我在应用渲染中调用 1 次的组件中：

<ClickAnimation x={item.x} y={item.y}/>

其中 item.x 和 item.y 是坐标。

这是我的组件的代码：

import React from 'react';
import {Animated, View} from 'react-native';

export default class ClickAnimation extends React.Component {
  state = {
    scaleAnim: new Animated.Value(0)
  };
  componentWillMount() {
    Animated
      .timing(this.state.scaleAnim, {
      toValue: 2,
      duration: 500
    })
      .start();
  }
  componentWillUpdate(nextProps) {
    if (nextProps.x != this.props.x && nextProps.y != this.props.y) {
      this.setState({
        scaleAnim: new Animated.Value(0)
      })
    }
  }
  componentDidUpdate() {
    console.log("componentDidUpdate",this.state.scaleAnim)
    Animated
      .timing(this.state.scaleAnim, {
      toValue: 2,
      duration: 500
    })
      .start();
  }
  render() {
    return (<Animated.View
      style={{
      position: "absolute",
      top: this.props.y,
      left: this.props.x,
      width: 50,
      height: 50,
      backgroundColor: "red",
      transform: [
        {
          scaleY: this.state.scaleAnim
        }, {
          scaleX: this.state.scaleAnim
        }, {
          translateX: -25
        }, {
          translateY: -25
        }
      ]
    }}/>);
  }
}

componentDidUpdate 中的 console.log 给我每次点击 2 条日志：

{_children: Array(2), _value: 2, ..., _animation: null...}

{_children: Array(2), _value: 0,..., _animation: null...}

真不知道接下来要做什么。

PS：在 NativeScript 中，这更容易。我只需要将新组件添加到 DOM.

Answer 1

根据 React 文档，您不能 this.setState() inside componentWillUpdate()，如果您需要更新状态以响应 prop 更改，请改用 componentWillReceiveProps(nextProps)。

https://facebook.github.io/react/docs/react-component.html#componentwillreceiveprops

阅读上面的 link 以了解更多详细信息并查看其注意事项。我希望这是导致问题的原因

Answer 2

似乎 EXPO XDE 使应用程序太慢，这就是动画部分无法正常工作的原因。

Answer 3

我找到了解决方案。

这有这个问题：

https://github.com/facebook/react-native/issues/6278

我看过了，所以我先写了 0,001。但是 0,001 还是太少了。使用 0,01 效果很好。

所以答案是：

把0换成0.01就可以了，因为太少了

setState 后的新动画 - React Native

New animation after setState - React Native

react-native

react-animated