React Native如何实现图片的懒加载

Question

我有一个列表视图，想在每行中显示一张图片，但不想一次性显示全部25张图片。我只想加载出现在视口中的图片。

我从属性中获取URL。

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

我该如何在React Native中实现这个功能。注：我尝试过这些库，但都不起作用。可能是它们针对旧版本的React编写的问题，而且其中一些不能与动态属性一起使用。

react-native-lazyload

react-lazy-load

- Waleed Arshad

---

你找到解决办法了吗？ - undefined

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

Source: react native elements

- Overcomer

Answer 2

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

- Shivam Sinha