@mpxjs/webpack-plugin 2.10.18-beta.13 → 2.10.18-beta.14

package/lib/runtime/components/react/dist/mpx-image.jsx

@@ -271,7 +271,31 @@ const Image = forwardRef((props, ref) => {
     const onImageLoad = (evt) => {
         evt.persist();
         RNImage.getSize(src, (width, height) => {
-            bindload(getCustomEvent('load', evt, {
+            // iPhone 8 等设备对缓存图 getSize 偶发返回 0，用 onLoad 事件里的真实尺寸兜底
+            if (!width || !height) {
+                const nativeEvent = evt.nativeEvent;
+                const source = nativeEvent.source;
+                width = (source && source.width) || nativeEvent.width || 0;
+                height = (source && source.height) || nativeEvent.height || 0;
+                // 布局模式下用真实尺寸同步 view（此时 useEffect 里的 getSize 也没拿到尺寸）
+                if (isLayoutMode && width && height && !state.current.ratio) {
+                    state.current.imageWidth = width;
+                    state.current.imageHeight = height;
+                    state.current.ratio = height / width;
+                    if (isWidthFixMode
+                        ? state.current.viewWidth
+                        : isHeightFixMode
+                            ? state.current.viewHeight
+                            : state.current.viewWidth && state.current.viewHeight) {
+                        setRatio(state.current.ratio);
+                        setImageWidth(width);
+                        setImageHeight(height);
+                        setViewSize(state.current.viewWidth, state.current.viewHeight, state.current.ratio);
+                        setLoaded(true);
+                    }
+                }
+            }
+            bindload && bindload(getCustomEvent('load', evt, {
                 detail: { width, height },
                 layoutRef
             }, props));
@@ -327,10 +351,12 @@ const Image = forwardRef((props, ref) => {
         return renderImage(extendObject({
             source: { uri: src },
             resizeMode: resizeMode,
-            onLoad: bindload && onImageLoad,
+            onLoad: onImageLoad,
             onError: binderror && onImageError,
             style: extendObject({
                 transformOrigin: 'left top',
+                // 布局模式下尺寸未知（ratio 为 0）前先隐藏，避免按默认高度闪一下（iPhone 8 getSize 返回 0 时尤其明显）
+                opacity: isLayoutMode && !ratio ? 0 : 1,
                 width: isCropMode ? imageWidth : '100%',
                 height: isCropMode ? imageHeight : '100%'
             }, isCropMode ? modeStyle : {})

package/lib/runtime/components/react/mpx-image.tsx

@@ -381,7 +381,31 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
   const onImageLoad = (evt: NativeSyntheticEvent<ImageLoadEventData>) => {
     evt.persist()
     RNImage.getSize(src, (width: number, height: number) => {
-      bindload!(
+      // iPhone 8 等设备对缓存图 getSize 偶发返回 0，用 onLoad 事件里的真实尺寸兜底
+      if (!width || !height) {
+        const nativeEvent = evt.nativeEvent as any
+        const source = nativeEvent.source
+        width = (source && source.width) || nativeEvent.width || 0
+        height = (source && source.height) || nativeEvent.height || 0
+        // 布局模式下用真实尺寸同步 view（此时 useEffect 里的 getSize 也没拿到尺寸）
+        if (isLayoutMode && width && height && !state.current.ratio) {
+          state.current.imageWidth = width
+          state.current.imageHeight = height
+          state.current.ratio = height / width
+          if (isWidthFixMode
+            ? state.current.viewWidth
+            : isHeightFixMode
+              ? state.current.viewHeight
+              : state.current.viewWidth && state.current.viewHeight) {
+            setRatio(state.current.ratio)
+            setImageWidth(width)
+            setImageHeight(height)
+            setViewSize(state.current.viewWidth!, state.current.viewHeight!, state.current.ratio)
+            setLoaded(true)
+          }
+        }
+      }
+      bindload && bindload!(
         getCustomEvent(
           'load',
           evt,
@@ -486,11 +510,13 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
         {
           source: { uri: src },
           resizeMode: resizeMode,
-          onLoad: bindload && onImageLoad,
+          onLoad: onImageLoad,
           onError: binderror && onImageError,
           style: extendObject(
             {
               transformOrigin: 'left top',
+              // 布局模式下尺寸未知（ratio 为 0）前先隐藏，避免按默认高度闪一下（iPhone 8 getSize 返回 0 时尤其明显）
+              opacity: isLayoutMode && !ratio ? 0 : 1,
               width: isCropMode ? imageWidth : '100%',
               height: isCropMode ? imageHeight : '100%'
             },

package/lib/runtime/components/react/mpx-section-list.tsx

@@ -120,7 +120,6 @@ const _SectionList = forwardRef<any, SectionListProps>((props = {}, ref) => {
   const scrollViewRef = useRef<any>(null)
   const sectionListGestureRef = useRef<any>()
 
-
   const indexMap = useRef<{ [key: string]: string | number }>({})
 
   const reverseIndexMap = useRef<{ [key: string]: number }>({})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.10.18-beta.13",
+  "version": "2.10.18-beta.14",
   "description": "mpx compile core",
   "keywords": [
     "mpx"