React Native 如何延迟加载图像答案

【问题标题】：React Native How to LazyLoad imageReact Native 如何延迟加载图像
【发布时间】：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

【问题讨论】：

标签： image reactjs react-native lazy-loading reactjs-flux

【解决方案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

【讨论】：