image - React Native 如何延迟加载图像

Question

我有一个 ListView ，我想在每一行上显示图像，但我不想一次显示全部 25 个图像。我只想加载视口(viewport)中的图像。

我在 props 中获取 url

<Image source={{uri: this.props.media.image_url}} 
       style={{ width:this.props.media.width,
       height: this.props.media.height}}
/>

我怎样才能在 native react 中实现这一目标。 注意:我已经尝试过这些库，但没有一个适合我。可能是为旧版本的react编写的版本问题加上其中一些不适用于动态 Prop

react-native-lazyload

react-lazy-load

Answer 1

您可以使用react native elements .

添加到项目:npm install --save react-native-elements

用法:

import { ActivityIndicator } from 'react-native';
import { Image } from 'react-native-elements';

// Standard Image
<Image
  source={{ uri: image }}
  style={{ width: 200, height: 200 }}
/>


// Image with custom placeholder content
<Image
  source={{ uri: image }}
  style={{ width: 200, height: 200 }}
  PlaceholderContent={<ActivityIndicator />}
/>

来源:react native elements