rni

react-native-img-with-placeholder

Image with placeholder for ReactNative

Showing:

Popularity

Downloads/wk

2

GitHub Stars

3

Maintenance

Last Commit

4yrs ago

Contributors

1

Package

Dependencies

0

License

ISC

Type Definitions

Tree-Shakeable

No?

Categories

Readme

react-native-img-with-placeholder

npm version

react-native-img-with-placeholderis used to display image with placeholder.

When image is loading, placeholder(aka default image) will be displayed. After image is loaded successfullly, placeholder will be removed to reduce view count.

Install

npm install react-native-img-with-placeholder --save

Props

propstypedesc
sourceImageSourceimage source
placeHolderSourcenumberplaceholder,local image, require('path')
style?objectimage style

用法

import ImageWithPlaceHolder from 'react-native-img-with-placeholder';

<ImageWithPlaceHolder
  style={styles.inner}
  source={{ uri: 'http://xxxx/f190c59d6e014a97831c471777863301.jpg' }}
  placeHolderSource={require('./img/default.png')}
/>

react-native-img-with-placeholder控件封装了默认图片的功能。

当图片加载中或者加载失败(比如地址不正确)时,显示默认图片。 当图片加载成功时,移除默认图片。

安装

npm install react-native-img-with-placeholder --save

属性

属性名类型说明
sourceImageSource将要显示的图片源,一般是网络图片
placeHolderSourcenumber默认图片,必须时本地图片,一般是通过require('path')得到的资源id
style?object样式

用法

import ImageWithPlaceHolder from 'react-native-img-with-placeholder';

<ImageWithPlaceHolder
  style={styles.inner}
  source={{ uri: 'http://xxxx/f190c59d6e014a97831c471777863301.jpg' }}
  placeHolderSource={require('./img/default.png')}
/>

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100