├── .gitignore
├── .idea
└── workspace.xml
├── README.md
├── assets
└── icon.png
├── index.js
├── lib
└── MKPLoadImageView.js
└── package.json
/.gitignore:
--------------------------------------------------------------------------------
1 | .idea
--------------------------------------------------------------------------------
/.idea/workspace.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
69 |
70 |
71 |
72 |
73 |
74 |
75 | true
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 | 1476094234347
138 |
139 |
140 | 1476094234347
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 |
157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 |
165 |
166 |
167 |
168 |
169 |
170 |
171 |
172 |
173 |
174 |
175 |
176 |
177 |
178 |
179 |
180 |
181 |
182 |
183 |
184 |
185 |
186 |
187 |
188 |
189 |
190 |
191 |
192 |
193 |
194 |
195 |
196 |
197 |
198 |
199 |
200 |
201 |
202 |
203 |
204 |
205 |
206 |
207 |
208 |
209 |
210 |
211 |
212 |
213 |
214 |
215 |
216 |
217 |
218 |
219 |
220 |
221 |
222 |
223 |
224 |
225 |
226 |
227 |
228 |
229 |
230 |
231 |
232 |
233 |
234 |
235 |
236 |
237 |
238 |
239 |
240 |
241 |
242 |
243 |
244 |
245 |
246 |
247 |
248 |
249 |
250 |
251 |
252 |
253 |
254 |
255 |
256 |
257 |
258 |
259 |
260 |
261 |
262 |
263 |
264 |
265 |
266 |
267 |
268 |
269 |
270 |
271 |
272 |
273 |
274 |
275 |
276 |
277 |
278 |
279 |
280 |
281 |
282 |
283 |
284 |
285 |
286 |
287 |
288 |
289 |
290 |
291 |
292 |
293 |
294 |
295 |
296 |
297 |
298 |
299 |
300 |
301 |
302 |
303 |
304 |
305 |
306 |
307 |
308 |
309 |
310 |
311 |
312 |
313 |
314 |
315 |
316 |
317 |
318 |
319 |
320 |
321 |
322 |
323 |
324 |
325 |
326 |
327 |
328 |
329 |
330 |
331 |
332 |
333 |
334 |
335 |
336 |
337 |
338 |
339 |
340 |
341 |
342 |
343 |
344 |
345 |
346 |
347 |
348 |
349 |
350 |
351 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # react-native-image-view
2 | ##功能介绍
3 | 1.支持图片下载前显示默认图片，下载完成后替换成下载后图片
4 |
5 | 2.支持图片下载时显示加载动画
6 |
7 | 3.支持点击，圆角，添加子节点等功能
8 |
9 | 4.特别处理安卓环境下同时设置了默认图片和下载图片后，点击时会显示默认图片的问题
10 |
11 | 5.支持图片本地缓存
12 |
13 | 6.支持自定义加载进度
14 |
15 | 支持安卓及iOS 7.0及以上。
16 |
17 | ##如何安装
18 | ```bash
19 | npm install mkp-react-native-image-view --save
20 | ```
21 | ##依赖
22 | - [url-parse](https://github.com/unshiftio/url-parse) URL处理
23 | - [crypto-js](https://github.com/brix/crypto-js) md5
24 | - [react-native-fs](https://github.com/johanneslumpe/react-native-fs) 文件系统
25 |
26 | ##如何使用
27 | ```javascript
28 | import MKPLoadImageView from "react-native-image-view";
29 |
30 | {}}>
34 |
35 | ```
36 |
37 | ##属性说明
38 |
39 | Any [`Image` property](http://facebook.github.io/react-native/docs/image.html) and the following:
40 |
41 | | 属性 | 描述 | 默认值 |
42 | |---|---|---|
43 | |**`imageSource`**|(可选） 图片资源,支持本地图片和网络图片，只有设置此属性才会显示下载进度|{uri:`imageUrl`}／require(`imagePath`)|
44 | |**`backImageSource`**|(可选）背景图，可选，持本地图片和网络图片,建议使用本地图片,只设置该属性不会显示下载进度|*None*|
45 | |**`style`**|(可选) 样式|*style={{width:200,height:200}}*|
46 | |**`onPress`**|(可选) 点击事件|*None*|
47 | |**`customIndicator`**|(可选) 自定义图片下载进度指示器|*None*|
48 | |**`indicatorType`**|(可选) 默认图片下载进度指示器样式|*circle*|
49 | |**`data`**|(可选) 用于点击事件数据回传|*None*|
50 | |**`loadCallBack`**|(可选) 下载进度回调函数|*None*|
51 | |**`hiddenProgress`**|(可选) 隐藏下载进度条|*false*|
52 | |**`clearCaheWillUnmount`**|(可选) 设置true时，当Image对象销毁的时候删除掉本地缓存图片|*false*|
53 |
54 |
55 | ## Demo
56 |
57 | ####exmaple1
58 | 
59 | ```
60 |
65 | ```
66 |
67 | ####exmaple2
68 | 
69 | ```
70 | {}}/>
77 | ```
78 |
79 | ####exmaple3
80 | 
81 | ```
82 |
87 | ```
88 |
89 | ####exmaple4
90 | 
91 | ```
92 | {}}/>
98 | ```
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
--------------------------------------------------------------------------------
/assets/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MonkeyKingPlus/react-native-image-view/ea657e88e251584d27c2c31df44d8c26379b74f5/assets/icon.png
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | module.exports = require('./lib/MKPLoadImageView.js')
2 |
--------------------------------------------------------------------------------
/lib/MKPLoadImageView.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Created by yzw on 2016/10/13.
3 | */
4 | /**
5 | * Created by yzw on 16/9/26.
6 | */
7 |
8 |
9 | import React, {Component} from 'react';
10 | import {
11 | Image,
12 | Text,
13 | View,
14 | TouchableOpacity,
15 | ActivityIndicator,
16 | Platform,
17 | ProgressViewIOS,
18 | ProgressBarAndroid
19 | } from 'react-native';
20 | // import * as Progress from 'react-native-progress';
21 | var PropTypes = require('react/lib/ReactPropTypes');
22 |
23 | import RNFS, { DocumentDirectoryPath } from 'react-native-fs';
24 | const URL = require('url-parse');
25 | const MD5 = require("crypto-js/md5");
26 |
27 |
28 | class ProgressBar extends Component {
29 |
30 | static propTypes = {
31 | progressProps: PropTypes.object,
32 | color:PropTypes.string,
33 | iosTrackTintColor:PropTypes.string,
34 | progress:PropTypes.number,
35 | }
36 | static defaultProps = {
37 | color:'gray',
38 | iosTrackTintColor:'gray',
39 | progress:0,
40 | };
41 |
42 |
43 | render() {
44 |
45 | if(Platform.OS === 'android'){
46 | return
47 | }
48 | else if(Platform.OS === 'ios') {
49 | return
50 | }
51 | }
52 | }
53 |
54 | export default class MKPLoadImageView extends Component {
55 |
56 | constructor(props) {
57 | super(props);
58 |
59 | this.state = {
60 | cachedImagePath:null,
61 | animating: props.source ? true : false,
62 | defaultSource: props.defaultSource ? props.defaultSource : require('../assets/icon.png'),
63 | source: props.source ? props.source : require('../assets/icon.png'),
64 | isLoalImage:PropTypes.bool, //是否是本地图片
65 | cacheable:false,
66 | }
67 | }
68 |
69 |
70 | clearImageCache(url){
71 |
72 | const dirPath = this.fileDirectory();
73 | const filePath = this.fullFilePath(this.fileName(url));
74 |
75 | RNFS.exists(filePath).then((haveFile) => {
76 | if (haveFile) {
77 | RNFS.exists(filePath).then((res) => {
78 | if (res) {
79 | RNFS.unlink(filePath).catch((err) => {});
80 | }
81 | });
82 | }
83 | })
84 | }
85 |
86 | static propTypes = {
87 | ...Image.propTypes,
88 |
89 | defaultSource: PropTypes.oneOfType([PropTypes.shape({
90 | uri: PropTypes.string,
91 | }),
92 | PropTypes.number,
93 | PropTypes.arrayOf(
94 | PropTypes.shape({
95 | uri: PropTypes.string,
96 | width: PropTypes.number,
97 | height: PropTypes.number,
98 | }))
99 | ]),
100 | source: PropTypes.oneOfType([PropTypes.shape({ uri: PropTypes.string, }),
101 | PropTypes.number,
102 | PropTypes.arrayOf( PropTypes.shape({
103 | uri: PropTypes.string,
104 | width: PropTypes.number,
105 | height: PropTypes.number,
106 | }))
107 | ]),
108 | style: PropTypes.oneOfType([PropTypes.object,PropTypes.number]),
109 | onPress: PropTypes.func,
110 | customIndicator: PropTypes.func,
111 | indicatorType:PropTypes.oneOf(['circle','line']),//默认是circle类型
112 | indicatorProps: PropTypes.object,
113 | data: PropTypes.any ,//点击事件，数据传输
114 | loadCallBack:PropTypes.func,
115 | hiddenProgress:PropTypes.bool,
116 | clearCaheWillUnmount:PropTypes.bool
117 | }
118 |
119 | static defaultProps = {
120 | progress:0,
121 | hiddenProgress:false,
122 | showLoading: true,
123 | indicatorType:'circle',
124 | style: {backgroundColor: 'white'}
125 | };
126 |
127 | componentWillReceiveProps(nextProps) {
128 | let newState = Object.assign({}, this.state);
129 | if (nextProps.defaultSource) {
130 | newState.defaultSource = nextProps.defaultSource;
131 | }
132 | if (nextProps.source) {
133 | newState.animating = true;
134 | }
135 | else {
136 | newState.animating = false;
137 | }
138 |
139 | this.setState(newState);
140 | }
141 |
142 |
143 | fileName(aurl){
144 | const url = new URL(aurl);
145 | const type = url.pathname.replace(/.*\.(.*)/, '$1');
146 | return MD5(url)+'.'+type
147 | }
148 |
149 | fileDirectory(){
150 | return DocumentDirectoryPath+'/CacheImage'
151 | }
152 | fullFilePath(fileName){
153 | return this.fileDirectory()+'/'+fileName;
154 | }
155 |
156 | getImageContent(source,fileName){
157 |
158 | let fullPath = this.fullFilePath(fileName);
159 |
160 | console.log('fullPath = ',fullPath)
161 | RNFS.stat(fullPath).then((result)=>{
162 |
163 |
164 | if(result.isFile()){//存在文件
165 | this.handleLonLoadEnd()
166 | this.setState({cacheable: true, source: fullPath});
167 | }
168 | }).catch(()=> {
169 |
170 | RNFS.mkdir(this.fileDirectory(), {NSURLIsExcludedFromBackupKey: true}).then(() => {
171 | let downloadOptions = {
172 | fromUrl: source.uri,
173 | toFile: fullPath,
174 | background: true,
175 | begin: this.handleStart.bind(this),
176 | progress: this.handleProgress.bind(this)
177 | };
178 |
179 | RNFS.downloadFile(downloadOptions)
180 | this.setState({cacheable: true, source: fullPath});
181 |
182 | }).catch((err) => {
183 | this.setState({cacheable: false, source: null});
184 | })
185 | })
186 | }
187 |
188 |
189 | analysisSource(source){
190 | if (source !== null
191 | && typeof source === "object"
192 | && source.hasOwnProperty('uri')) {
193 |
194 | const url = new URL(source.uri);
195 | const type = url.pathname.replace(/.*\.(.*)/, '$1');
196 |
197 | let fileName = this.fileName(source.uri);
198 | this.getImageContent(source,fileName);
199 | this.setState({isLoalImage: false});
200 | }
201 | else {
202 | this.setState({isLoalImage: true});
203 | }
204 | }
205 |
206 | componentWillMount() {
207 | this.analysisSource(this.state.source.uri)
208 | }
209 | componentWillUnmount() {
210 | if(this.props.clearCaheWillUnmount) {
211 | this.clearImageCache(this.props.source.uri)
212 | }
213 | }
214 |
215 |
216 | async handleStart(){
217 | let newState = Object.assign({}, this.state);
218 | newState.animating = true;
219 | newState.progress = 0;
220 | this.setState(newState);
221 | if(this.props.loadCallBack){
222 | this.props.loadCallBack(0);
223 | }
224 | }
225 |
226 | async handleProgress(event){
227 |
228 | let progress = (event.bytesWritten / event.contentLength )
229 |
230 | if(progress<1) {
231 | let newState = Object.assign({}, this.state);
232 | newState.progress = progress;
233 | this.setState(newState);
234 | if (this.props.loadCallBack) {
235 | this.props.loadCallBack(progress);
236 | }
237 | }
238 | else{
239 | let newState = Object.assign({}, this.state);
240 | newState.progress = 1;
241 | newState.animating = false;
242 | this.setState(newState);
243 | if (this.props.loadCallBack) {
244 | this.props.loadCallBack(1);
245 | }
246 | }
247 |
248 | }
249 |
250 | handleLonLoadEnd(){
251 |
252 | let newState = Object.assign({}, this.state);
253 | newState.animating = false;
254 | newState.progress = 1;
255 | newState.defaultSource = require('../assets/icon.png');
256 | this.setState(newState);
257 | if(this.props.loadCallBack){
258 | this.props.loadCallBack(1);
259 | }
260 | }
261 |
262 | clickHandle() {
263 | if (this.props.onPress) {
264 | this.props.onPress(this.props.data)
265 | }
266 | }
267 |
268 | marginAndPadding(){
269 | return {
270 | marginHorizontal:0,
271 | marginVertical:0,
272 | paddingHorizontal:0,
273 | paddingVertical:0,
274 | marginLeft:0,
275 | marginRight:0,
276 | marginTop:0,
277 | marginBottom:0,
278 | paddingLeft:0,
279 | paddingRight:0,
280 | paddingTop:0,
281 | paddingBottom:0,
282 | }
283 | }
284 |
285 | renderCache(props) {
286 | return (
287 |
292 | {!this.props.customIndicator && !this.props.hiddenProgress && this.props.indicatorType==='circle' && this.state.animating && }
294 | {!this.props.customIndicator && !this.props.hiddenProgress && this.props.indicatorType==='line' && this.state.animating && }
296 |
297 | {this.props.customIndicator && !this.props.hiddenProgress && this.state.animating && }
298 |
299 |
300 | );
301 | }
302 |
303 | renderLocal(props){
304 | return
308 |
309 | }
310 |
311 | render() {
312 | let props = {};
313 | props.resizeMethod = this.props.resizeMethod;
314 | props.resizeMode = this.props.resizeMode;
315 |
316 |
317 | return
319 |
320 |
323 |
324 | {this.props.source && this.state.isLoalImage && this.renderLocal(props)}
325 |
326 | {this.props.source && !this.state.isLoalImage && this.state.cacheable && this.renderCache(props)}
327 |
328 |
329 | {this.props.children}
330 |
331 |
332 |
333 |
334 | }
335 |
336 |
337 | };
338 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "mkp-react-native-image-view",
3 | "version": "1.0.6",
4 | "description": "Load imageView",
5 | "main": "index.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1"
8 | },
9 | "repository": {
10 | "type": "git",
11 | "url": "git+https://github.com/MonkeyKingPlus/react-native-image-view.git"
12 | },
13 | "keywords": [
14 | "react-native",
15 | "react",
16 | "native",
17 | "imageView"
18 | ],
19 | "author": "MonkeyPlusKing",
20 | "license": "ISC",
21 | "bugs": {
22 | "url": "https://github.com/MonkeyKingPlus/react-native-image-view/issues"
23 | },
24 | "homepage": "https://github.com/MonkeyKingPlus/react-native-image-view#readme",
25 | "dependencies": {
26 | "crypto-js": "^3.1.6",
27 | "react-native-fs": "^2.0.1-rc.2",
28 | "url-parse": "^1.1.1"
29 | }
30 | }
31 |
--------------------------------------------------------------------------------