feat: indicate failed image request, resolves #27

just4fun · May 13, 2018 · b60049d · b60049d
1 parent 5fec35d
commit b60049d
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 13 deletions.
diff --git a/src/components/ProgressImage.js b/src/components/ProgressImage.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import {
   View,
   Image,
+  Text,
   ActivityIndicator,
   TouchableHighlight
 } from 'react-native';
@@ -25,7 +26,8 @@ export default class ProgressImage extends Component {
     super(props);
 
     this.state = {
-      isLoading: false
+      isLoading: false,
+      isLoadError: false
     };
   }
 
@@ -70,22 +72,35 @@ export default class ProgressImage extends Component {
 
   render() {
     let { style, thumbUri, originalUri } = this.props;
-    let { isLoading } = this.state;
+    let { isLoading, isLoadError } = this.state;
 
     return (
       <TouchableHighlight
         underlayColor={colors.underlay}
         onPress={() => SafariView.show(originalUri)}>
         <View style={[styles.image, style]}>
-          <Image
-            source={{ uri: thumbUri }}
-            defaultSource={require('../images/image_default.png')}
-            onLoadStart={() => this.setState({ isLoading: true })}
-            onLoadEnd={() => this.setState({ isLoading: false })}
-            resizeMode={'contain'}
-            // onLayout={event => this.handleLayout(event)}
-            style={[styles.image, style]} />
-          {isLoading && <ActivityIndicator style={styles.indicator} />}
+          {isLoadError &&
+            <View>
+              <Image
+                defaultSource={require('../images/image_fail.png')}
+                resizeMode={'contain'}
+                style={[styles.image, style]} />
+              <Text style={styles.text}>图片加载失败或图片已失效</Text>
+            </View>
+            ||
+            <View>
+              <Image
+                source={{ uri: thumbUri }}
+                defaultSource={require('../images/image_default.png')}
+                onLoadStart={() => this.setState({ isLoading: true })}
+                onLoadEnd={() => this.setState({ isLoading: false })}
+                onError={() => this.setState({ isLoadError: true })}
+                resizeMode={'contain'}
+                // onLayout={event => this.handleLayout(event)}
+                style={[styles.image, style]} />
+              {isLoading && <ActivityIndicator style={styles.indicator} />}
+            </View>
+          }
         </View>
       </TouchableHighlight>
     );

diff --git a/src/images/image_fail.png b/src/images/image_fail.png
diff --git a/src/styles/components/_ProgressImage.js b/src/styles/components/_ProgressImage.js
@@ -2,6 +2,7 @@ import {
   StyleSheet,
   Dimensions
 } from 'react-native';
+import colors from '../common/_colors';
 
 const window = Dimensions.get('window');
 const IMAGE_HEIGHT = 250;
@@ -13,7 +14,14 @@ export default StyleSheet.create({
   indicator: {
     position: 'absolute',
     top: IMAGE_HEIGHT / 2,
-    // `20` is width for ActivityIndicator.
-    left: window.width / 2 - 20
+    // window.width / 2 - (width of ActivityIndicator / 2 + margin of image)
+    left: window.width / 2 - (20 / 2 + 10)
+  },
+  text: {
+    position: 'absolute',
+    top: IMAGE_HEIGHT / 2 + 60,
+    // window.width / 2 - (width of `图片加载失败或图片已失效` / 2 + margin of image)
+    left: window.width / 2 - (168 / 2 + 10),
+    color: colors.mainField
   }
 });