Question

对于我的本机应用程序，我找不到问题的答案。

如果您对如何实现这一目标有所了解，那就太棒了：）

我正在尝试做什么：

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

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

我尝试了什么：

为了做动画，我放了一个＆lt;查看/＆GT; （位置：'绝对'）在新闻发布位置。

这＆lt;查看/＆GT;嵌入在我在App渲染中调用一次的组件中：

<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 docs，你不能在componentWillUpdate（）中使用this.setState（），如果你需要更新状态以响应prop更改，请使用componentWillReceiveProps（nextProps）。

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

阅读以上链接了解更多详情并查看其警告。我希望这是造成问题的原因

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

3 个答案: