我的反应原生应用程序找不到我的问题的答案。
如果您知道如何实现这一目标，那就太好了:)
我正在尝试做的事情：
在页面中，当我按下某处时，我想在按下位置显示动画（例如方形幻影）。
我所取得的成就： 当我单击时，会在正确的位置显示一个带有动画的正方形。但是当我点击其他地方时，方块的位置会改变，但动画不会重新启动。
我试过的：
为了制作动画，我在按下位置放置了一个 < View/> （位置：'absolute'）。
此 < View/> 嵌入在我在 App 渲染中调用 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。