React Native如何使用LazyLoad图像

Question

我有一个列表视图，我想在每行显示图像，我不想一次显示整个25个图像。我只是想加载来自视口的图像。

我在道具中获取网址

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

我怎样才能在本机中做到这一点。注意：我试过这些库，但没有一个适合我。可能是它为旧版本的反应版本编写的版本问题，其中一些不适用于动态道具

react-native-lazyload

react-lazy-load

Answer 1

我用这个插件。这是非常全面的https://github.com/magicismight/react-native-lazyload

Answer 2

你可以使用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