Initial commit: expo-popcore-app

components/ui/Img.tsx

@@ -0,0 +1,80 @@
+import React, { forwardRef, useMemo } from 'react'
+import { Image as ExpoImage, ImageProps as ExpoImageProps } from 'expo-image'
+import { TouchableOpacity, TouchableOpacityProps } from 'react-native'
+
+interface ImgProps extends ExpoImageProps {
+  onClick?: () => void
+  touchProps?: TouchableOpacityProps
+  className?: string
+  src?: string | number
+  errorSource?: string | number
+}
+
+const Img = forwardRef<ExpoImage, ImgProps>((props, ref) => {
+  const {
+    onClick,
+    touchProps = {},
+    className = '',
+    style,
+    src,
+    errorSource,
+    source: propSource,
+    ...reset
+  } = props
+
+  // 判断是否为网络图片
+  const isNetworkImage = (uri: string | number): boolean => {
+    if (typeof uri === 'number') return false
+    return uri.startsWith('http://') || uri.startsWith('https://')
+  }
+
+  // 构建图片源
+  const imageSource = useMemo(() => {
+    // 如果提供了source属性，优先使用
+    if (propSource) return propSource
+
+    if (!src) return undefined
+
+    if (typeof src === 'number') {
+      // 本地图片资源（require导入的资源ID）
+      return src
+    } else {
+      // 网络图片或本地文件路径
+      if (isNetworkImage(src)) {
+        return {
+          uri: src,
+          cache: 'immutable', // 使用expo-image的缓存机制
+        }
+      } else {
+        // 本地文件路径
+        return { uri: src }
+      }
+    }
+  }, [src, propSource])
+
+  const imgProps = {
+    style,
+    className,
+    ref,
+    source: imageSource,
+    errorSource,
+    ...reset,
+  }
+
+  const handlePress = () => {
+    onClick && onClick()
+  }
+
+  if (onClick) {
+    return (
+      <TouchableOpacity onPress={handlePress} {...touchProps}>
+        <ExpoImage {...imgProps} />
+      </TouchableOpacity>
+    )
+  }
+
+  return <ExpoImage {...imgProps} />
+})
+
+Img.displayName = 'Img'
+export default Img