Question

在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);
  });
}

有什么想法吗？这可能根本不可能 - 这就是为什么我在这里，欢呼！

Answer 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]}>

这将使一切按预期工作。

在y轴上的React-Native ListView行动画

1 个答案: