fix(TransitionImage): 添加图片加载中和加载失败占位符

ChenlingasMx · ChenlingasMx · commit d42e3a44aab9 · 2023-04-13T11:03:58.000+08:00
diff --git a/packages/core/src/ActionSheet/README.md b/packages/core/src/ActionSheet/README.md
@@ -73,4 +73,5 @@ export default Demo
 | containerStyle | 容器样式 | `StyleProp<ViewStyle>` | - |
 | textStyle | 文本样式 | `StyleProp<ViewStyle>` | - |
 | onPress | 点击 ActionSheetItem 触发的事件 | `(event: GestureResponderEvent) => void` | - |
+| disabled | 禁止点击 | `boolean` | `false` |
 
diff --git a/packages/core/src/ActionSheet/item.tsx b/packages/core/src/ActionSheet/item.tsx
@@ -26,6 +26,7 @@ export interface ActionSheetItemProps {
   underlayColor?: string;
   onPress?: (event: GestureResponderEvent) => void;
   children?: React.ReactNode;
+  disabled?: boolean;
 }
 
 export interface ActionSheetItemState {}
@@ -39,6 +40,7 @@ export default function ActionSheetItem(props: ActionSheetItemProps) {
     underlayColor = colorScheme === 'light' ? theme.colors.background : '#1A1A22',
     containerStyle,
     textStyle,
+    disabled = false,
     children,
   } = props;
 
@@ -48,6 +50,7 @@ export default function ActionSheetItem(props: ActionSheetItemProps) {
       activeOpacity={activeOpacity}
       underlayColor={underlayColor}
       onPress={onPress}
+      disabled={disabled}
     >
       <View style={StyleSheet.flatten([styles.actionSheetItem, containerStyle])}>
         <Text style={StyleSheet.flatten([styles.actionSheetItemText, textStyle])}>{children}</Text>
diff --git a/packages/core/src/TransitionImage/README.md b/packages/core/src/TransitionImage/README.md
@@ -73,4 +73,5 @@ import { ImageProps } from 'react-native';
 | placeholderStyle | 占位符容器的附加样式（可选） | StyleProp<ViewStyle> | - |
 | transition | 在图像加载时执行淡入淡出过渡 | boolean | - |
 | transitionDuration | 图像加载时执行淡入淡出过渡时间 | boolean | - |
+| disabled | 禁止点击 | boolean | false |
 
diff --git a/packages/core/src/TransitionImage/index.tsx b/packages/core/src/TransitionImage/index.tsx
@@ -9,34 +9,46 @@ import {
   ViewStyle,
   StyleProp,
   ImageStyle,
+  NativeSyntheticEvent,
+  ImageLoadEventData,
+  ImageErrorEventData,
+  ActivityIndicator,
+  Text,
 } from 'react-native';
+import Icon from '../Icon';
 
 export type ImageProps = RNImageProps & {
   Component?: typeof React.Component;
   onPress?(): void;
   onLongPress?(): void;
-  ImageComponent?: React.ComponentType<any>;
+  ImageComponent?: React.ComponentType<ImageProps>;
   PlaceholderContent?: React.ReactElement<any>;
   containerStyle?: StyleProp<ViewStyle>;
   childrenContainerStyle?: StyleProp<ViewStyle>;
   placeholderStyle?: StyleProp<ViewStyle>;
   transition?: boolean;
   transitionDuration?: number;
+  disabled?: boolean;
   children?: React.ReactNode;
 };
 
 type ImageState = {
   placeholderOpacity: Animated.Value;
+  isLoading: boolean;
+  hasError: boolean;
 };
 
 export default function TransitionImage(props: ImageProps & Partial<ImageProps>) {
-  const [state, _] = useState<ImageState>({
+  const [state, setState] = useState<ImageState>({
     placeholderOpacity: new Animated.Value(1),
+    isLoading: true,
+    hasError: false,
   });
 
-  const onLoad = (e: any) => {
+  const onLoad = (e: NativeSyntheticEvent<ImageLoadEventData>) => {
     const { transition, onLoad, transitionDuration } = props;
     if (!transition) {
+      setState({ ...state, isLoading: false });
       state.placeholderOpacity.setValue(0);
       return;
     }
@@ -46,9 +58,14 @@ export default function TransitionImage(props: ImageProps & Partial<ImageProps>)
       duration: transitionDuration,
       useNativeDriver: true,
     }).start();
+    setState({ ...state, isLoading: false });
     onLoad && onLoad(e);
   };
 
+  const onError = (e: NativeSyntheticEvent<ImageErrorEventData>) => {
+    setState({ ...state, isLoading: false, hasError: true });
+  };
+
   const {
     onPress,
     onLongPress,
@@ -60,25 +77,42 @@ export default function TransitionImage(props: ImageProps & Partial<ImageProps>)
     style = {},
     ImageComponent = ImageNative,
     children,
+    disabled = false,
     ...attributes
   } = props;
 
   const hasImage = Boolean(attributes.source);
   const { width, height, ...styleProps } = StyleSheet.flatten(style);
 
+  const PlaceholderContentLoading = (
+    <View style={styles.errorContainer}>
+      <ActivityIndicator />
+      <Text style={{ color: '#fff', marginTop: 8 }}>加载中...</Text>
+    </View>
+  );
+
+  const PlaceholderContentError = (
+    <View style={styles.errorContainer}>
+      <Icon name="circle-close-o" color="#fff" size={24} />
+      <Text style={{ color: '#fff', marginTop: 8 }}>加载失败</Text>
+    </View>
+  );
+
   return (
     <Component
       onPress={onPress}
       onLongPress={onLongPress}
       accessibilityIgnoresInvertColors={true}
       style={StyleSheet.flatten([styles.container, containerStyle])}
+      disabled={disabled || state.isLoading || state.hasError}
     >
       <ImageComponent
         testID="RNE__Image"
         transition={true}
         transitionDuration={360}
         {...attributes}
         onLoad={onLoad}
+        onError={onError}
         style={StyleSheet.flatten([
           StyleSheet.absoluteFill,
           {
@@ -104,7 +138,9 @@ export default function TransitionImage(props: ImageProps & Partial<ImageProps>)
           testID="RNE__Image__placeholder"
           style={StyleSheet.flatten([style, styles.placeholder, placeholderStyle])}
         >
-          {PlaceholderContent}
+          {state.isLoading && PlaceholderContentLoading}
+          {state.hasError && PlaceholderContentError}
+          {!state.isLoading && !state.hasError && PlaceholderContent}
         </View>
       </Animated.View>
 
@@ -137,4 +173,13 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  errorContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'rgba(50, 50, 51, .88)',
+    height: '100%',
+    width: '100%',
+  },
 });
diff --git a/packages/react-native-image-picker/src/ImagePicker/index.tsx b/packages/react-native-image-picker/src/ImagePicker/index.tsx
@@ -9,7 +9,7 @@ import {
   ImageRequireSource,
 } from 'react-native';
 import { CameraOptions, ImagePickerResponse } from 'react-native-image-picker';
-import { Theme, Flex, ActionSheet, ActionSheetItem, TransitionImage, Icon, Text } from '@uiw/react-native';
+import { Theme, Flex, ActionSheet, ActionSheetItem, TransitionImage, Icon } from '@uiw/react-native';
 import ImageView from 'react-native-image-viewing';
 import { useTheme } from '@shopify/restyle';
 import useImagePicker from './useImagePicker';
@@ -149,15 +149,13 @@ const ImagePicker = ({
               <TransitionImage
                 source={{ uri: item }}
                 style={{ width, height, borderRadius: 2 }}
-                PlaceholderContent={<Text color="text">加载失败</Text>}
                 transition={true}
+                disabled={loading}
+                onPress={() => previewImage(index)}
               />
-              <View style={styles.previewBox}>
-                <TouchableOpacity disabled={loading} onPress={() => previewImage(index)} style={styles.previewIcon}>
-                  <Icon name="eye" color={theme.colors.primary_background || '#3578e5'} size={16} />
-                </TouchableOpacity>
-                <TouchableOpacity disabled={loading} onPress={() => deleteImage(index)} style={styles.previewIcon}>
-                  <Icon name="delete" color={theme.colors.primary_background || '#3578e5'} size={16} />
+              <View style={styles.deleteBox}>
+                <TouchableOpacity disabled={loading} onPress={() => deleteImage(index)}>
+                  <Icon name="close" color="#fff" size={10} />
                 </TouchableOpacity>
               </View>
             </View>
@@ -184,14 +182,18 @@ const ImagePicker = ({
               disabled={loading}
               style={{ justifyContent: 'center', alignItems: 'center', width, height }}
             >
-              <Icon name="plus-square-o" color={theme.colors.text || '#A9A9A9'} size={20} />
+              <Icon name="camera-o" color={theme.colors.gray300 || '#ccc'} size={24} />
             </TouchableOpacity>
           </View>
         </Flex.Item>
       </Flex>
       <ActionSheet onCancel={setLaunchVisibleFalse} visible={launchVisible}>
-        <ActionSheetItem onPress={launchLibrary}>{launchLibraryText}</ActionSheetItem>
-        <ActionSheetItem onPress={launchCamera}>{launchCameraText}</ActionSheetItem>
+        <ActionSheetItem disabled={loading} onPress={launchLibrary}>
+          {launchLibraryText}
+        </ActionSheetItem>
+        <ActionSheetItem disabled={loading} onPress={launchCamera}>
+          {launchCameraText}
+        </ActionSheetItem>
       </ActionSheet>
       <ImageView
         visible={previewVisible}
@@ -218,21 +220,20 @@ function createStyles({ width = 100, height = 100, borderColor = '#CCCCCC', back
       backgroundColor: backgroundColor,
       margin: 4,
     },
-    previewBox: {
+    deleteBox: {
       position: 'absolute',
-      left: 0,
+      right: 0,
       top: 0,
       flexDirection: 'row',
       alignItems: 'center',
       justifyContent: 'center',
-      height: height,
-      width: width,
-    },
-    previewIcon: {
-      alignItems: 'center',
-      justifyContent: 'center',
-      width: width * 0.375,
-      height: height * 0.375,
+      height: 18,
+      width: 18,
+      backgroundColor: 'rgba(0, 0, 0, .7)',
+      borderTopLeftRadius: 0,
+      borderTopRightRadius: 0,
+      borderBottomRightRadius: 0,
+      borderBottomLeftRadius: 12,
     },
   });
 }
