diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-image.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-image.tsx index 89567c9b01..484d8d4281 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-image.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-image.tsx @@ -408,7 +408,7 @@ const Image = forwardRef, ImageProps>((props, re const onImageLoad = (evt: NativeSyntheticEvent) => { evt.persist() const triggerLoad = (width: number, height: number) => { - bindload!( + bindload && bindload( getCustomEvent( 'load', evt, @@ -420,9 +420,29 @@ const Image = forwardRef, ImageProps>((props, re ) ) } - const { source } = evt.nativeEvent - if (source && source.width && source.height) { - triggerLoad(source.width, source.height) + // RN Image 尺寸在 nativeEvent.source;FastImage 在 nativeEvent 上 + const nativeEvent = evt.nativeEvent as any + const source = nativeEvent.source + const width = (source && source.width) || nativeEvent.width || 0 + const height = (source && source.height) || nativeEvent.height || 0 + // 布局模式下,若 getImageSize 没拿到尺寸(iPhone 8 返回 0,ratio 仍为 0),用真实尺寸兜底同步 view + 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) + } + } + if (width && height) { + triggerLoad(width, height) return } getImageSize(src, triggerLoad) @@ -523,11 +543,14 @@ const Image = forwardRef, ImageProps>((props, re { source: normalizeImageSource(src), resizeMode: resizeMode, - onLoad: bindload && onImageLoad, + onLoad: (isLayoutMode || bindload) ? onImageLoad : undefined, onError: binderror && onImageError, style: extendObject( { transformOrigin: 'left top', + // 布局模式下尺寸未知(ratio 为 0)前先隐藏,避免按默认高度闪一下(iPhone 8 getImageSize 返回 0 时尤其明显) + // ratio未0的情况只能是图片高度为0,如果高度为0不展示图片也是合理的,因此不单独判断ratio未0的情况 + opacity: isLayoutMode && !ratio ? 0 : 1, width: isCropMode ? imageWidth : '100%', height: isCropMode ? imageHeight : '100%' }, diff --git a/packages/webpack-plugin/lib/runtime/components/web/mpx-scroll-view.vue b/packages/webpack-plugin/lib/runtime/components/web/mpx-scroll-view.vue index 883e33f81f..407354ccbb 100644 --- a/packages/webpack-plugin/lib/runtime/components/web/mpx-scroll-view.vue +++ b/packages/webpack-plugin/lib/runtime/components/web/mpx-scroll-view.vue @@ -519,6 +519,8 @@ .mpx-scroll-view overflow hidden position relative + .mpx-scroll-view-content + flex-shrink 0 // 解决内容区域被挤压导致的滚动异常问题,在scroll-view开启增强特性时会有子元素使用flex布局的场景 .mpx-pull-down-wrapper position: absolute