• Stars
    star
    161
  • Rank 233,417 (Top 5 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created almost 9 years ago
  • Updated over 5 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

React Native CacheImage (remobile)

A cache-image for react-native
  • When use web image, this module will find the web image's url corresponding image file is exist or not, if exist, it will use local exist file, and check this CacheImage's old url and new url, if old url is the same as new url, do noting. if not, sub old url's ref and add new url's ref, if old url's ref is 0, delete old url corresponding image file.
  • it also will check total storage, total storage is 1024102450, when local file total size is above total storage, it will delete the oldest local file and clear corresponding record.

Installation

npm install @remobile/react-native-cache-image --save

Usage

Example

'use strict';

var React = require('react');
var ReactNative = require('react-native');
var {
    StyleSheet,
    View,
} = ReactNative;

var CacheImage = require('@remobile/react-native-cache-image');

var SERVER = 'http://192.168.1.117:3000/';

module.exports = React.createClass({
    render: function() {
        return (
            <View style={styles.container}>
                <CacheImage
                    resizeMode='stretch'
                    defaultSource={app.img.tabnav_list}
                    url={SERVER+"1.png"}
                    style={styles.image}
                    />
                <CacheImage
                    resizeMode='stretch'
                    defaultSource={app.img.tabnav_list}
                    url={SERVER+"2.png"}
                    style={styles.image}
                    />
                <CacheImage
                    resizeMode='stretch'
                    defaultSource={app.img.tabnav_list}
                    url={SERVER+"3.png"}
                    style={styles.image}
                    />
            </View>
        );
    }
});

var styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    image: {
        width:200,
        height:200,
    }
});

Props

This module supports react-native Image's props all.

  • defaultSource : PropTypes.string.isRequired - local image for default image
  • url : PropTypes.string.isRequired - the url of web image
    • format: 'http://{server}/{name}.png' or 'http://{server}/{name}.jpg'
    • must have jpg or png suffix
    • {name} must have version. e.g: first version is verison1.jpg, when you want to update image, you can use verison2.jpg, otherwise this module will not download image

More Repositories

1

react-native-splashscreen

Java
373
star
2

react-native-toast

A android like toast for android and ios, android use native toast, ios use UIView+Toast
Objective-C
346
star
3

react-native-refresh-infinite-listview

a pure js pull-down-refresh and pull-up-loadmore react-native listview
JavaScript
148
star
4

react-native-marquee-label

A marquee label for react-native(if you use js pure marquee, use remobile/react-native-marquee[ https://github.com/remobile/react-native-marquee ])
Objective-C
116
star
5

react-native-file-transfer

A file-transfer for react-native, code come from cordova, support for android and ios
Java
85
star
6

react-native-update

Update js version and app version for ios and android
Java
79
star
7

react-native-qrcode-local-image

A local qrcode image parse for react-native
Java
55
star
8

react-native-cordova

A cordova plugin bridge for react-native
Java
50
star
9

react-native-image-animation

A pure js image animation like ios animationImages, support ios and android
JavaScript
48
star
10

react-native-zip

A unzip for react-native, code come from cordova, support for android and ios
C
46
star
11

react-native-action-sheet

JavaScript
38
star
12

react-native-template

fastly create new project for react-native
JavaScript
33
star
13

react-native-cocos2dx

A react-native wrapper cocos2d-html5
HTML
32
star
14

react-native-camera

A cordova camera for react-native, supprt for ios and android
Java
30
star
15

react-native-video

A video player for react-native, support hls
Java
26
star
16

react-native-marquee

A react-native marquee list write in js
JavaScript
26
star
17

react-native-datetime-picker

A datetime-picker for react-native support for android and ios
Java
24
star
18

react-native-mongoose

JavaScript
23
star
19

react-native-card-swiper

A react-native card swiper write in js
JavaScript
23
star
20

react-native-des

A des crypto for react-native
Objective-C
22
star
21

react-native-local-notifications

A cordova local-notifications for react-native, supprt for ios and android
Java
21
star
22

react-native-image-crop

A component for react-native crop image, such as edit user head
JavaScript
19
star
23

react-native-image-picker

A image picker for react-native, supprt for ios and android
Java
18
star
24

react-native-echarts

A react-native wrapper baidu echarts
HTML
16
star
25

react-native-battery-status

Objective-C
15
star
26

react-native-indexed-listview

A indexed listview in chat app like contacts list
JavaScript
15
star
27

react-native-dialogs

A dialogs for react-native, code come from cordova, support for android and ios
Java
15
star
28

react-native-smart-keyboard

A smart keyboard for ios base on IQKeyboardManager[android not needed]
Objective-C
14
star
29

react-native-sqlite

A cordova sqlite for react-native, supprt for ios and android
C
12
star
30

react-native-simple-button

A Simple react-native button
JavaScript
11
star
31

react-native-module

Dynamic loading third party react-native app/module for react-native
Java
11
star
32

react-native-qrcode

A pure js show string as qrcode in react-native View
JavaScript
9
star
33

atom-wx

微信小程序语法高亮(atom-wx)
9
star
34

react-native-contacts

Java
9
star
35

react-native-file

Java
8
star
36

react-native-kitchen-sink

kitchen-sink for react-native
JavaScript
8
star
37

react-native-call-state

phone call state detection module for react-native,include ios and android.
Java
7
star
38

react-native-card-list

A react-native card list write in js
JavaScript
6
star
39

react-native-clip-rect

A clip react for react-native, the shape is center highlight and around darkness
JavaScript
6
star
40

react-native-capture

Objective-C
6
star
41

react-native-audio

A audio player for react-native
Java
6
star
42

react-native-chat

react-native-chat
JavaScript
5
star
43

remobile

react mobile library
JavaScript
4
star
44

react-native-image-compress

react native base64 image compress, android and ios included.
Java
4
star
45

react-native-amap-geolocation

a react native amap geolocation moudle for android and ios
Objective-C
4
star
46

react-native-baidu-map

A baidu map for react-native, support for ios and android
Objective-C
4
star
47

react-native-call

A call for react-native
Java
4
star
48

wx-template

微信小程序模板工程
JavaScript
3
star
49

react-native-camera-roll-picker

A React Native component providing images selection from camera roll
JavaScript
3
star
50

react-native-maps-direction-uri

a map direction use uri mode for react native, ios map,qq map,baidu map,iosa map be supported.
Java
2
star
51

react-lifecycle

A react lifecycle for react and react-native
JavaScript
2
star
52

react-native-3d-panel

A 3d left menu like old version QQ(模仿老版本QQ的侧滑菜单)
JavaScript
2
star
53

react-native-cache-module

Cache dynamic loading third party react-native app/module for react-native
JavaScript
1
star
54

remobile-server

A React Content Management System Build With Redux, Relate, GraphQL, Mongoose And AntDesign
JavaScript
1
star
55

mdoc

Markdown doc web site
JavaScript
1
star
56

react-native-image-edit

react-native-image-edit
Java
1
star
57

remobile-ant

CSS
1
star