y 轴上的 React-Native ListView 行动画答案

【问题标题】：React-Native ListView row animation on the y axisy 轴上的 React-Native ListView 行动画
【发布时间】：2015-11-15 23:41:28
【问题描述】：

在我的 ListView 中为 y 轴上的行设置动画时遇到了一些问题。 x轴很好，y轴不行。

这是我正在做的精简版：风格：

var animateStyle = {transform:[{translateX: this.state.position.x, translateY: this.state.position.y}]}

动画视图：

<Animated.View ref={(row) => main[userId] = row} style={[animateStyle]}>
  <TouchableHighlight onPress={() => this._move()}>
    <Text>hello</Text>
  </TouchableHighlight>
</Animated.View>

下面的示例设置 x 值并完美地移动行，但如果您切换值以在 y 轴上设置动画，则不会发生任何事情。

_move: function() {
  var newValue = this.state.position.x._value+1;
  this.state.position.x.setValue(newValue);
  var thisUserComponent = this.props.main[this.props.user.id];
  thisUserComponent.refs.node.measure((x, y) => {
    console.log(x, y);
  });
}

有什么想法吗？这可能根本不可能——这就是我在这里的原因，干杯！

【问题讨论】：

我没有答案，但看看其他人是如何做到的。这可能有助于为 y 轴设置动画 github.com/dancormier/react-native-swipeout
感谢您提供帮助，克里斯！但是，看起来该组件仅在 x 轴（水平）上进行动画处理。
开，伙计...我完全把那个搞砸了！我一定是累了。很抱歉浪费您的时间并且没有增加任何价值。当 Spencer Ahrens 宣布动画时，他展示了一些相当复杂的例子。也许那里有一些东西会有所帮助？我自己还没有玩过动画，所以不幸的是，这对我很有帮助。这是链接reactnative.com/react-native-animated

标签： listview animation react-native

【解决方案1】：

为了让一切正常工作，我必须更改加载转换的方式。

在我做之前：

var animateStyle = {transform:[{translateX: this.state.position.x, translateY: this.state.position.y}]}

你必须用花括号分隔每个变换：

var animateStyle = {transform:[{translateY: this.state.position.y}, {translateX: this.state.position.x}]}

<Animated.View style={[containerStyle, animateStyle]}>

这将使一切按预期工作。

【讨论】：