Git Product home page Git Product logo

react-native-3party-image-intro's Introduction

react-native-3party-image-intro

A short doc to introduce some react native third party image related components

图片缓存组件
464 Star
已经不再维护,作者转而维护react-native-expo-image-cache了
注:CachedImage基于原生Image组件,实现图片缓存;
CustomCachedImage基于react-native-image-progress,可现实图片加载进度;
ImageCache可对缓存过程进行控制,如清缓存、取消下载、监听下载等

用法与react-native-img-cache相似,组件名改为Image和CacheManager,接口有变化
78 Star
使用 React Native ElementsReact Native Fiber 建立

最近有维护,但进度条已经由react-native-progress来实现
1065 Star
新示例:

import Image from 'react-native-image-progress';
import ProgressBar from 'react-native-progress/Bar';
<Image 
  source={{ uri: 'http://loremflickr.com/640/480/dog' }} 
  indicator={ProgressBar} 
  style={{
    width: 320, 
    height: 240, 
  }}/>

使图片在空白处显示,可以不指定图片的尺寸
322 Star
最近有维护,不频繁

类似react-native-img-cache
327 Star
有维护,不频繁,用法稍复杂,效果没对比过
有三个组件:

const {
    CachedImage,            // react-native component that is a drop-in replacement for your react-native `Image` components
    ImageCacheProvider,     // a top level component that provides accsess to the underlying `ImageCacheManager` and preloads images
    ImageCacheManager,      // the logic behind cache machanism - ttl, fs, url resolving etc. 
} = require('react-native-cached-image');

瀑布流图片显示组件,支持定制列数,支持设备旋转、点击处理、自定义Header、列表优化、使用第三方图片组件等特性
580 Star
维护及时

图片裁剪库,支持JPEG、PNG,安卓支持WEBP
500 Star
有维护,不频繁

通过添加自定义的RCTImageDataDecoder支持webp格式,简单好用 50 Star
基本不维护,被fork到了 react-native-webp-support,但是只多了相关文档,似乎没功能升级

相册或相机中读取图片,可支持裁剪或不裁剪,支持base64;
缺点是只支持指定尺寸裁剪,无法根据读取到的图片尺寸定制裁剪尺寸
1891 Star
维护及时

iOS基于SDWebImage,android基于Glide,解决原生Image闪烁、cache miss、低效等问题 1088 Star
维护及时

支持全屏查看一个图片数组,可以左右滑切换图片,双指缩放图片
603 Star
其中缩放部分依赖 react-native-image-zoom
维护及时

图片手势支持,拖动、缩放等
157 Star
维护及时

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.