React Native 如何延迟加载图像

Posted 2023-02-22

【中文标题】React Native 如何延迟加载图像

【英文标题】：React Native How to LazyLoad image

【发布时间】：2016-12-08 16:03:15

【问题描述】：

我有一个列表视图，我想在每一行上显示图像，但我不想一次显示全部 25 张图像。我只是想加载进入视口的图像。

我在 props 中获取 url

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

如何在本机反应中实现这一点。 注意：我已经尝试过这些库，但没有一个对我有用。可能是它为旧版本的 react Plus 编写的版本问题，其中一些不适用于动态道具

react-native-lazyload

react-lazy-load

【参考方案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

【参考方案2】：

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