reactjs - 以动画背景作为加载器的 React-native 图像

Question

我有一个平面列表，它可以渲染带有叠加层的图像。

我创建了一个动画背景，它会随着图像加载而改变颜色(效果很好)。但一旦图像加载，我就很难让背景消失。我尝试使用 onLoad 但设置 this.state 适用于列表中的所有图像。另外，如果图像在加载之前是隐藏的，那就更好了。我更喜欢实时延迟加载，而不是在 ComponentWillMount 中预取它们。

有什么想法吗？

<Image
    source={{uri: image}}
    style={styles.cardImg}
    onLoad={() => this.state.imageLoaded = true}
/>
{!this.state.imageLoaded && (
    <Animated.View
        style={[styles.cardBg, {
            backgroundColor: this._animatedValue.interpolate({
                inputRange: [0, 100],
                outputRange: ['rgba(100,100,100, 0.3)', 'rgba(100,100,100,0.5)']
            })
        }]}
    />
)}

更新

<FlatList
          ref={(ref) => { this.FlatList = ref; }}
          data={this.props.data}
          keyExtractor={(item) => item._id}
          renderItem={this._renderCard.bind(this)}
          onEndThreshold={50}
          onEndReached={this.props.loadMore}
          ListFooterComponent={this._renderFooter}
          showsVerticalScrollIndicator={false}
          style={styles.list}
          extraData={this.state}
          refreshControl={<RefreshControl
                    refreshing={this.props.loading}
                    onRefresh={this.props.onRefresh}
                />}
        />

更新2

理想情况下，我正在寻找类似的东西(代码不起作用):

<Image source={{uri: image}} style={styles.cardImg} onError={(e) => {card.item.media.error = true}}/> 

Answer 1

那就是Component Shiny :

class LoadingImage extends Component {
  constructor(props) {
    super(props);

    this.state = {
      imageLoaded: false
    }
  }

  render() {
    /// delegate every props as Image's props
    return (
      <Image
        {...this.props}
        onLoad={() => this.setState({imageLoaded: true})}
      />
      {!this.state.imageLoaded && (
        <Animated.View
          style={[styles.cardBg, {
            backgroundColor: this._animatedValue.interpolate({
              inputRange: [0, 100],
              outputRange: ['rgba(100,100,100, 0.3)', 
                            'rgba(100,100,100,0.5)']
            })
          }]}
        />
      )}
    );
  }
}

因此您可以在您的应用程序中使用此 LoadingImage。

<LoadingImage
    source={{uri: image}}
    style={styles.cardImg}
/>