天道酬勤,学无止境

React-Native ListView row animation on the y axis

问题

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

有任何想法吗? 这可能根本不可能——这就是我在这里的原因,干杯!

回答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]}>

这将使一切按预期工作。

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐