Giter Club home page Giter Club logo

react-native-cz-image-placeholder's Introduction

Manual installation

npm install react-native-cz-image-placeholder --save

###依赖库

npm install react-native-fast-image --save

Usage

1.引入组件

import ImagePlaceholder from 'react-native-cz-image-placeholder';

<ImagePlaceholder
    width={32}
    height={38}
    url={pic_label_image_url}
    defaultSource={require('../../../assets/images/good_default_icon.png')}
/>  

iOS: 在Podfile中加入

pod 'react-native-fast-image', :path => '../node_modules/react-native-fast-image/react-native-fast-image.podspec'

然后执行

pod install

2.属性:

defaultSource: 默认图: require('./images/xxx.png')
url: 图片地址: ''
width: 图片宽
height: 图片高
style: 图片样式: {borderRadius: 50}
headers: 图片headers: {"x": "y"}
priority: 图片下载优先级: CZImagePlaceholder.priority.normal (low, high)
cache: 下载缓存策略: CZImagePlaceholder.cacheControl.immutable (web, cacheOnly)
resizeMode: 图片显示类型: CZImagePlaceholder.resizeMode.contain (cover, stretch, center)

3.属性方法:

evaluateView: 赋值当前视图对象
onLoadStart: 开始下载网络图片
onLoad(event): 下载成功
onError: 下载失败
onLoadEnd: 加载完成,无论成功失败都会调用

4.供外部调用的方法:

/*
* 更换图片地址
* */
this.imagePlaceholder.modifyImageUrl('url');

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.