Question

在React中，似乎动画始终绑定到this.state中的属性。但是，如果我在视图中有多个需要动画的对象呢？例如，如果我有一个包含多个图像的ListView，并且我想在加载到ListView中时对这些图像的不透明度进行动画处理？

render() {
  //var _scrollView: ScrollView;
  return (
    <View style={styles.container}>
      <ScrollView
        style={styles.scrollView}>

        <ListView
            initialListSize={1}
            dataSource={this.state.dataSource}
            renderRow={this.renderRow.bind(this)}
            style={styles.postList}
            />

      </ScrollView>

    </View>
  );
}

renderRow(post) {
  //var postItemHeight = windowSize / 2
  return (
    <View style={styles.postItem}>
      <Image
        style={styles.postImage}
        source={{uri: post.cover_image}}
        onLoad={(e) => this.imageLoaded()}>

      </Image>
    </View>
  );
}

imageLoaded() {
  // now animate the image opacity
  // for every image that is loaded into the listview
}

Answer 1

Animated值没有理由需要处于组件状态 - 这就是示例如何显示如何执行它。如果您愿意，可以在州内保留一组Animated值，将它们放入Flux商店，或者您想要这样做。

但是，在您的特定情况下，最简单的解决方案是创建一个代表ListView的单个图像行的组件。然后，您可以使用组件的个别状态来管理其动画。

例如：

const FadeImage = React.createClass({
  displayName: 'FadeImage',
  propTypes: Image.propTypes,
  getInitialState() {
    return {
      opacity: new Animated.Value(0)
    };
  },
  setNativeProps(nativeProps) {
    this._image.setNativeProps(nativeProps);
  },
  fadeIn() {
    Animated.spring(this.state.opacity, {
      toValue: 1,
      friction: 10,
      tension: 60
    }).start();
  },
  render() {
    return (
      <Animated.View style={{opacity: this.state.opacity}}>
        <Image {...this.props} onLoad={this.fadeIn} ref={component => this._image = component} />
      </Animated.View>
    );
  }
});

它是Image的替代品，因此您可以像使用普通的图像组件一样使用它。

在React Native中为对象数组设置动画

1 个答案: