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)']
            })
          }]}
        />
      )}
    );
  }
}

因此，您可以在App中使用此LoadingImage。

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

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

1 个答案: