具有动画背景的 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 闪耀的地方：

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}
/>

具有动画背景的 React-native 图像作为加载器

React-native image with animated background as loader

reactjs

react-native

react-native-android

react-native-ios