@mpxjs/webpack-plugin 2.9.67 → 2.9.69

package/lib/runtime/components/react/dist/mpx-picker-view-column.jsx

@@ -1,108 +1,167 @@
-import { View, Animated, SafeAreaView } from 'react-native';
-import React, { forwardRef, useRef, useState, useEffect } from 'react';
-import { useTransformStyle, splitStyle, splitProps, wrapChildren, useLayout } from './utils';
-import useNodesRef from './useNodesRef'; // 引入辅助函数
-const defaultItemHeight = 36;
-// 每个Column 都有个外层的高度, 内部的元素高度
-// 默认的高度
+import { Animated, SafeAreaView } from 'react-native';
+import React, { forwardRef, useRef, useState, useMemo, useCallback, useEffect } from 'react';
+import { useTransformStyle, splitStyle, splitProps, wrapChildren, useLayout, usePrevious } from './utils';
+import useNodesRef from './useNodesRef';
+import { createFaces } from './pickerFaces';
+import PickerOverlay from './pickerOverlay';
+// 默认的单个选项高度
+const DefaultPickerItemH = 36;
+// 默认一屏可见选项个数
+const visibleCount = 5;
 const _PickerViewColumn = forwardRef((props, ref) => {
-    const { children, selectedIndex, onColumnLayoutChange, onSelectChange, getInnerLayout, style, wrapperStyle, 'enable-var': enableVar, 'external-var-context': externalVarContext } = props;
-    // PickerViewColumn
+    const { columnData, columnIndex, initialIndex, onSelectChange, onColumnItemRawHChange, getInnerLayout, style, wrapperStyle, pickerOverlayStyle, 'enable-var': enableVar, 'external-var-context': externalVarContext } = props;
     const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext });
     const { textStyle } = splitStyle(normalStyle);
     const { textProps } = splitProps(props);
-    // const { innerStyle } = splitStyle(normalStyle)
-    // scrollView的ref
     const scrollViewRef = useRef(null);
     useNodesRef(props, ref, scrollViewRef, {});
-    // 每个元素的高度
-    let [itemH, setItemH] = useState(0);
+    const { height: pickerH, itemHeight = DefaultPickerItemH } = wrapperStyle;
+    const [itemRawH, setItemRawH] = useState(0); // 单个选项真实渲染高度
+    const maxIndex = useMemo(() => columnData.length - 1, [columnData]);
+    const touching = useRef(false);
+    const scrolling = useRef(false);
+    const activeIndex = useRef(initialIndex);
+    const prevIndex = usePrevious(initialIndex);
+    const prevMaxIndex = usePrevious(maxIndex);
+    const initialOffset = useMemo(() => ({
+        x: 0,
+        y: itemRawH * initialIndex
+    }), [itemRawH]);
+    const snapToOffsets = useMemo(() => columnData.map((_, i) => i * itemRawH), [columnData, itemRawH]);
+    const contentContainerStyle = useMemo(() => {
+        return [
+            {
+                paddingVertical: Math.round(pickerH - itemRawH) / 2
+            }
+        ];
+    }, [pickerH, itemRawH]);
     useEffect(() => {
-        if (selectedIndex && itemH) {
-            const offsetY = selectedIndex * itemH;
-            scrollViewRef.current?.scrollTo({ x: 0, y: offsetY, animated: true });
+        if (!scrollViewRef.current ||
+            !itemRawH ||
+            touching.current ||
+            scrolling.current ||
+            prevIndex == null ||
+            initialIndex === prevIndex ||
+            initialIndex === activeIndex.current ||
+            maxIndex !== prevMaxIndex) {
+            return;
         }
-    }, [selectedIndex, itemH]);
+        activeIndex.current = initialIndex;
+        scrollViewRef.current.scrollTo({
+            x: 0,
+            y: itemRawH * initialIndex,
+            animated: false
+        });
+    }, [itemRawH, initialIndex]);
     const onScrollViewLayout = () => {
         getInnerLayout && getInnerLayout(layoutRef);
     };
-    const { 
-    // 存储layout布局信息
-    layoutRef, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: scrollViewRef, onLayout: onScrollViewLayout });
+    const { layoutRef, layoutProps } = useLayout({
+        props,
+        hasSelfPercent,
+        setWidth,
+        setHeight,
+        nodeRef: scrollViewRef,
+        onLayout: onScrollViewLayout
+    });
+    const onContentSizeChange = (w, h) => {
+        scrollViewRef.current?.scrollTo({
+            x: 0,
+            y: itemRawH * initialIndex,
+            animated: false
+        });
+    };
     const onItemLayout = (e) => {
-        const layout = e.nativeEvent.layout;
-        if (layout.height && itemH !== layout.height) {
-            itemH = layout.height;
-            setItemH(layout.height);
-            onColumnLayoutChange && onColumnLayoutChange({ height: layout.height * 5 });
+        const { height: rawH } = e.nativeEvent.layout;
+        if (rawH && itemRawH !== rawH) {
+            setItemRawH(rawH);
+            onColumnItemRawHChange(rawH);
         }
     };
-    const onMomentumScrollEnd = (e) => {
-        if (scrollViewRef && itemH) {
-            const { y: scrollY } = e.nativeEvent.contentOffset;
-            const selIndex = Math.floor(scrollY / itemH);
-            onSelectChange(selIndex);
-        }
+    const onTouchStart = () => {
+        touching.current = true;
     };
-    const renderInnerchild = () => {
-        // Fragment 节点
-        let realElement = [];
-        const getRealChilds = () => {
-            if (Array.isArray(children)) {
-                realElement = children;
-            }
-            else {
-                const tempChild = children;
-                if (tempChild.props.children && tempChild.props.children) {
-                    realElement = tempChild.props.children;
-                }
-                else {
-                    realElement = [children];
-                }
-            }
-            return realElement;
-        };
-        const realChilds = getRealChilds();
-        const arrChild = realChilds.map((item, index) => {
-            const InnerProps = index === 0 ? { onLayout: onItemLayout } : {};
-            const strKey = 'picker' + props.prefix + '-column' + index;
-            const arrHeight = (wrapperStyle.itemHeight + '').match(/\d+/g) || [];
-            const iHeight = (arrHeight[0] || defaultItemHeight);
-            return <View key={strKey} {...InnerProps} style={[{ height: iHeight, width: '100%' }]}>
-        {wrapChildren({
-                    children: item
-                }, {
-                    hasVarDec,
-                    varContext: varContextRef.current,
-                    textStyle,
-                    textProps
-                })}
-      </View>;
-        });
-        const totalHeight = itemH * 5;
-        if (wrapperStyle.height && totalHeight !== wrapperStyle.height) {
-            const fix = Math.ceil((totalHeight - wrapperStyle.height) / 2);
-            arrChild.unshift(<View key="picker-column-0" style={[{ height: itemH - fix }]}></View>);
-            arrChild.unshift(<View key="picker-column-1" style={[{ height: itemH }]}></View>);
-            arrChild.push(<View key="picker-column-2" style={[{ height: itemH }]}></View>);
-            arrChild.push(<View key="picker-column-3" style={[{ height: itemH - fix }]}></View>);
+    const onTouchEnd = () => {
+        touching.current = false;
+    };
+    const onTouchCancel = () => {
+        touching.current = false;
+    };
+    const onMomentumScrollBegin = () => {
+        scrolling.current = true;
+    };
+    const onMomentumScrollEnd = (e) => {
+        scrolling.current = false;
+        if (!itemRawH) {
+            return;
         }
-        else {
-            arrChild.unshift(<View key="picker-column-0" style={[{ height: itemH }]}></View>);
-            arrChild.unshift(<View key="picker-column-1" style={[{ height: itemH }]}></View>);
-            arrChild.push(<View key="picker-column-2" style={[{ height: itemH }]}></View>);
-            arrChild.push(<View key="picker-column-3" style={[{ height: itemH }]}></View>);
+        const { y: scrollY } = e.nativeEvent.contentOffset;
+        let calcIndex = Math.round(scrollY / itemRawH);
+        activeIndex.current = calcIndex;
+        if (calcIndex !== initialIndex) {
+            calcIndex = Math.max(0, Math.min(calcIndex, maxIndex)) || 0;
+            onSelectChange(calcIndex);
         }
-        return arrChild;
     };
+    const offsetY = useRef(new Animated.Value(0)).current;
+    const onScroll = useMemo(() => Animated.event([{ nativeEvent: { contentOffset: { y: offsetY } } }], {
+        useNativeDriver: true
+    }), [offsetY]);
+    const faces = useMemo(() => createFaces(itemRawH, visibleCount), [itemRawH]);
+    const getTransform = useCallback((index) => {
+        const inputRange = faces.map((f) => itemRawH * (index + f.index));
+        return {
+            opacity: offsetY.interpolate({
+                inputRange: inputRange,
+                outputRange: faces.map((x) => x.opacity),
+                extrapolate: 'clamp'
+            }),
+            rotateX: offsetY.interpolate({
+                inputRange: inputRange,
+                outputRange: faces.map((x) => `${x.deg}deg`),
+                extrapolate: 'extend'
+            }),
+            translateY: offsetY.interpolate({
+                inputRange: inputRange,
+                outputRange: faces.map((x) => x.offsetY),
+                extrapolate: 'extend'
+            })
+        };
+    }, [offsetY, faces, itemRawH]);
+    const renderInnerchild = () => columnData.map((item, index) => {
+        const InnerProps = index === 0 ? { onLayout: onItemLayout } : {};
+        const strKey = `picker-column-${columnIndex}-${index}`;
+        const { opacity, rotateX, translateY } = getTransform(index);
+        return (<Animated.View key={strKey} {...InnerProps} style={[
+                {
+                    height: itemHeight || DefaultPickerItemH,
+                    width: '100%',
+                    opacity,
+                    transform: [
+                        { translateY },
+                        { rotateX },
+                        { perspective: 1000 } // 适配 Android
+                    ]
+                }
+            ]}>
+          {wrapChildren({ children: item }, {
+                hasVarDec,
+                varContext: varContextRef.current,
+                textStyle,
+                textProps
+            })}
+        </Animated.View>);
+    });
     const renderScollView = () => {
-        return (<Animated.ScrollView horizontal={false} ref={scrollViewRef} bounces={false} scrollsToTop={false} removeClippedSubviews={true} showsHorizontalScrollIndicator={false} showsVerticalScrollIndicator={false} pagingEnabled={false} snapToInterval={itemH} automaticallyAdjustContentInsets={false} {...layoutProps} onMomentumScrollEnd={onMomentumScrollEnd}>
+        return (<Animated.ScrollView ref={scrollViewRef} bounces={true} horizontal={false} pagingEnabled={false} nestedScrollEnabled={true} removeClippedSubviews={true} showsVerticalScrollIndicator={false} showsHorizontalScrollIndicator={false} {...layoutProps} scrollEventThrottle={16} contentContainerStyle={contentContainerStyle} contentOffset={initialOffset} snapToOffsets={snapToOffsets} onContentSizeChange={onContentSizeChange} onScroll={onScroll} onTouchStart={onTouchStart} onTouchEnd={onTouchEnd} onTouchCancel={onTouchCancel} onMomentumScrollBegin={onMomentumScrollBegin} onMomentumScrollEnd={onMomentumScrollEnd}>
         {renderInnerchild()}
-    </Animated.ScrollView>);
+      </Animated.ScrollView>);
     };
+    const renderOverlay = () => (<PickerOverlay itemHeight={itemHeight} overlayItemStyle={pickerOverlayStyle}/>);
     return (<SafeAreaView style={[{ display: 'flex', flex: 1 }]}>
-    {renderScollView()}
-  </SafeAreaView>);
+      {renderScollView()}
+      {renderOverlay()}
+    </SafeAreaView>);
 });
-_PickerViewColumn.displayName = 'mpx-picker-view-column';
+_PickerViewColumn.displayName = 'MpxPickerViewColumn';
 export default _PickerViewColumn;

package/lib/runtime/components/react/dist/mpx-picker-view.jsx

@@ -1,9 +1,8 @@
 import { View } from 'react-native';
-import { LinearGradient } from 'react-native-linear-gradient';
 import React, { forwardRef, useState, useRef } from 'react';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
-import useNodesRef from './useNodesRef'; // 引入辅助函数
-import { parseInlineStyle, useTransformStyle, splitStyle, splitProps, useLayout, wrapChildren } from './utils';
+import useNodesRef from './useNodesRef';
+import { useLayout, splitProps, splitStyle, wrapChildren, parseInlineStyle, useTransformStyle, useDebounceCallback, useStableCallback, extendObject } from './utils';
 const styles = {
     wrapper: {
         display: 'flex',
@@ -12,16 +11,6 @@ const styles = {
         justifyContent: 'space-around',
         overflow: 'hidden',
         alignItems: 'center'
-    },
-    maskTop: {
-        position: 'absolute',
-        width: 1000,
-        zIndex: 100
-    },
-    maskBottom: {
-        position: 'absolute',
-        width: 1000,
-        zIndex: 100
     }
 };
 const _PickerView = forwardRef((props, ref) => {
@@ -29,67 +18,62 @@ const _PickerView = forwardRef((props, ref) => {
     // indicatorStyle 需要转换为rn的style
     // 微信设置到pick-view上上设置的normalStyle如border等需要转换成RN的style然后进行透传
     const indicatorStyle = parseInlineStyle(props['indicator-style']);
-    const { height: indicatorH, width: indicatorW } = indicatorStyle;
+    const { height: indicatorH, ...pickerOverlayStyle } = indicatorStyle;
+    const [pickMaxH, setPickMaxH] = useState(0);
     const nodeRef = useRef(null);
-    useNodesRef(props, ref, nodeRef, {});
-    //  picker-view 设置的color等textStyle,在小程序上的表现是可以继承到最内层的text样式, 但是RN内部column是slot无法设置, 需要业务自己在column内的元素上设置
+    const cloneRef = useRef(null);
+    const activeValueRef = useRef(value);
+    activeValueRef.current = value.slice();
     const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext });
-    const { textStyle } = splitStyle(normalStyle);
-    const { textProps } = splitProps(props);
+    useNodesRef(props, ref, nodeRef, {});
     const { 
     // 存储layout布局信息
     layoutRef, layoutProps, layoutStyle } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: nodeRef });
-    const isSetW = indicatorW !== undefined ? 1 : 0;
-    const cloneRef = useRef(null);
-    const maskPos = {};
-    let [pickH, setPickH] = useState(0);
-    const itemH = pickH / 5;
-    if (normalStyle?.height && pickH && pickH !== normalStyle?.height) {
-        maskPos.height = itemH * 2 + Math.ceil((normalStyle.height - pickH) / 2);
-    }
-    else {
-        maskPos.height = itemH * 2;
-    }
-    const onColumnLayoutChange = (layoutConfig) => {
-        pickH = layoutConfig.height;
-        setPickH(layoutConfig.height);
+    const { textProps } = splitProps(props);
+    const { textStyle } = splitStyle(normalStyle);
+    const onColumnItemRawHChange = (height) => {
+        if (height > pickMaxH) {
+            setPickMaxH(height);
+        }
     };
-    const onSelectChange = (columnIndex, selIndex) => {
-        const changeValue = value.slice();
-        changeValue[columnIndex] = selIndex;
-        const eventData = getCustomEvent('change', {}, { detail: { value: changeValue, source: 'change' }, layoutRef });
-        bindchange && bindchange(eventData);
+    const bindchangeDebounce = useDebounceCallback(useStableCallback(bindchange), 300);
+    const onSelectChange = (columnIndex, selectedIndex) => {
+        bindchangeDebounce.clear();
+        const activeValue = activeValueRef.current;
+        activeValue[columnIndex] = selectedIndex;
+        const eventData = getCustomEvent('change', {}, { detail: { value: activeValue, source: 'change' }, layoutRef });
+        bindchangeDebounce(eventData);
     };
-    const innerProps = useInnerProps(props, {
+    const onInitialChange = (value) => {
+        const eventData = getCustomEvent('change', {}, { detail: { value, source: 'change' }, layoutRef });
+        bindchange?.(eventData); // immediate
+    };
+    const innerProps = useInnerProps(props, extendObject({
         ref: nodeRef,
-        style: {
-            ...normalStyle,
-            ...layoutStyle,
+        style: extendObject(normalStyle, layoutStyle, {
             position: 'relative',
             overflow: 'hidden'
-        },
-        ...layoutProps
-    }, [
-        'enable-offset'
-    ], { layoutRef });
-    const cloneChild = (child, index) => {
-        // const extraProps = index === 0 ? { getInnerLayout: getInnerLayout, innerProps } : {}
+        }),
+        layoutProps
+    }), ['enable-offset'], { layoutRef });
+    const renderColumn = (child, index, columnData, initialIndex) => {
         const extraProps = {};
-        const childProps = {
-            ...child?.props,
+        const childProps = child?.props || {};
+        const wrappedProps = extendObject(childProps, {
+            columnData,
             ref: cloneRef,
-            prefix: index,
-            key: 'pick-view' + index,
+            columnIndex: index,
+            key: `pick-view-${index}`,
             wrapperStyle: {
                 height: normalStyle?.height || 0,
                 itemHeight: indicatorH || 0
             },
-            onColumnLayoutChange,
+            onColumnItemRawHChange,
             onSelectChange: onSelectChange.bind(null, index),
-            selectedIndex: value?.[index] || 0,
-            ...extraProps
-        };
-        const realElement = React.cloneElement(child, childProps);
+            initialIndex,
+            pickerOverlayStyle
+        }, extraProps);
+        const realElement = React.cloneElement(child, wrappedProps);
         return wrapChildren({
             children: realElement
         }, {
@@ -99,65 +83,37 @@ const _PickerView = forwardRef((props, ref) => {
             textProps
         });
     };
-    const renderTopMask = () => {
-        const linearProps = {
-            colors: ['rgba(255,255,255,0.8)', 'rgba(255,255,255,0.2)'],
-            style: [
-                styles.maskTop,
-                {
-                    height: maskPos.height,
-                    top: 0,
-                    pointerEvents: 'none'
-                }
-            ]
-        };
-        return (<LinearGradient {...linearProps}/>);
-    };
-    const renderBottomMask = () => {
-        const linearProps = {
-            colors: ['rgba(255,255,255,0.2)', 'rgba(255,255,255,0.8)'],
-            style: [
-                styles.maskBottom,
-                {
-                    height: maskPos.height,
-                    bottom: 0,
-                    pointerEvents: 'none'
-                }
-            ]
-        };
-        return <LinearGradient {...linearProps}></LinearGradient>;
+    const validateChildInitialIndex = (index, data) => {
+        return Math.max(0, Math.min(value[index] || 0, data.length - 1));
     };
-    const renderLine = () => {
-        return <View style={[{
-                    position: 'absolute',
-                    top: '50%',
-                    transform: [{ translateY: -(itemH / 2) }],
-                    height: itemH,
-                    borderTopWidth: 1,
-                    borderBottomWidth: 1,
-                    borderColor: '#f0f0f0',
-                    width: '100%',
-                    zIndex: 101
-                }]}></View>;
-    };
-    const renderSubChild = () => {
-        if (Array.isArray(children)) {
-            return children.map((item, index) => {
-                return cloneChild(item, index);
-            });
-        }
-        else {
-            return cloneChild(children, 0);
+    const flatColumnChildren = (data) => {
+        const columnData = React.Children.toArray(data?.props?.children);
+        if (columnData.length === 1 && React.isValidElement(columnData[0]) && columnData[0].type === React.Fragment) {
+            // 只有一个 Fragment 嵌套情况
+            return React.Children.toArray(columnData[0].props.children);
         }
+        return columnData;
+    };
+    const renderPickerColumns = () => {
+        const columns = React.Children.toArray(children);
+        const renderColumns = [];
+        const validValue = [];
+        let isInvalid = false;
+        columns.forEach((item, index) => {
+            const columnData = flatColumnChildren(item);
+            const validIndex = validateChildInitialIndex(index, columnData);
+            if (validIndex !== value[index]) {
+                isInvalid = true;
+            }
+            validValue.push(validIndex);
+            renderColumns.push(renderColumn(item, index, columnData, validIndex));
+        });
+        isInvalid && onInitialChange(validValue);
+        return renderColumns;
     };
     return (<View {...innerProps}>
-    {renderTopMask()}
-    <View style={[styles.wrapper]}>
-      {renderSubChild()}
-    </View>
-    {renderBottomMask()}
-    {!isSetW && renderLine()}
-  </View>);
+      <View style={[styles.wrapper]}>{renderPickerColumns()}</View>
+    </View>);
 });
-_PickerView.displayName = 'mpx-picker-view';
+_PickerView.displayName = 'MpxPickerView';
 export default _PickerView;

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

@@ -10,7 +10,7 @@ import useInnerProps from './getInnerListeners';
 import Animated from 'react-native-reanimated';
 import useAnimationHooks from './useAnimationHooks';
 import useNodesRef from './useNodesRef';
-import { parseUrl, PERCENT_REGEX, splitStyle, splitProps, useTransformStyle, wrapChildren, useLayout } from './utils';
+import { parseUrl, PERCENT_REGEX, splitStyle, splitProps, useTransformStyle, wrapChildren, useLayout, renderImage, pickStyle } from './utils';
 import LinearGradient from 'react-native-linear-gradient';
 const linearMap = new Map([
     ['top', 0],
@@ -201,7 +201,7 @@ function backgroundSize(imageProps, preImageInfo, imageSize, layoutInfo) {
         }
         else { // 数值类型      ImageStyle
             // 数值类型设置为 stretch
-            imageProps.style.resizeMode = 'stretch';
+            imageProps.resizeMode = 'stretch';
             dimensions = {
                 width: isPercent(width) ? width : +width,
                 height: isPercent(height) ? height : +height
@@ -216,8 +216,9 @@ function backgroundSize(imageProps, preImageInfo, imageSize, layoutInfo) {
 }
 // background-image转换为source
 function backgroundImage(imageProps, preImageInfo) {
-    if (preImageInfo.src) {
-        imageProps.src = preImageInfo.src;
+    const src = preImageInfo.src;
+    if (src) {
+        imageProps.source = { uri: src };
     }
 }
 // 渐变的转换
@@ -241,8 +242,8 @@ function linearGradient(imageProps, preImageInfo, imageSize, layoutInfo) {
 const imageStyleToProps = (preImageInfo, imageSize, layoutInfo) => {
     // 初始化
     const imageProps = {
+        resizeMode: 'cover',
         style: {
-            resizeMode: 'cover',
             position: 'absolute'
             // ...StyleSheet.absoluteFillObject
         },
@@ -430,7 +431,23 @@ function preParseImage(imageStyle) {
 function isDiagonalAngle(linearInfo) {
     return !!(linearInfo?.direction && diagonalAngleMap[linearInfo.direction]);
 }
-function wrapImage(imageStyle) {
+function inheritStyle(innerStyle = {}) {
+    const { borderWidth, borderRadius } = innerStyle;
+    const borderStyles = ['borderRadius', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomRightRadius', 'borderBottomLeftRadius'];
+    return pickStyle(innerStyle, borderStyles, borderWidth && borderRadius
+        ? (key, val) => {
+            // 盒子内圆角borderWith与borderRadius的关系
+            // 当borderRadius 小于 当borderWith 内边框为直角
+            // 当borderRadius 大于等于 当borderWith 内边框为圆角
+            if (borderStyles.includes(key)) {
+                const borderVal = +val - borderWidth;
+                return borderVal > 0 ? borderVal : 0;
+            }
+            return val;
+        }
+        : undefined);
+}
+function wrapImage(imageStyle, innerStyle, enableFastImage) {
     // 预处理数据
     const preImageInfo = preParseImage(imageStyle);
     // 预解析
@@ -510,12 +527,12 @@ function wrapImage(imageStyle) {
             setShow(true);
         }
     };
-    return <View key='backgroundImage' {...needLayout ? { onLayout } : null} style={{ ...StyleSheet.absoluteFillObject, overflow: 'hidden' }}>
+    return <View key='backgroundImage' {...needLayout ? { onLayout } : null} style={{ ...inheritStyle(innerStyle), ...StyleSheet.absoluteFillObject, overflow: 'hidden' }}>
     {show && type === 'linear' && <LinearGradient useAngle={true} {...imageStyleToProps(preImageInfo, sizeInfo.current, layoutInfo.current)}/>}
-    {show && type === 'image' && <Image {...imageStyleToProps(preImageInfo, sizeInfo.current, layoutInfo.current)}/>}
+    {show && type === 'image' && (renderImage(imageStyleToProps(preImageInfo, sizeInfo.current, layoutInfo.current), enableFastImage))}
   </View>;
 }
-function wrapWithChildren(props, { hasVarDec, enableBackground, textStyle, backgroundStyle, varContext, textProps }) {
+function wrapWithChildren(props, { hasVarDec, enableBackground, textStyle, backgroundStyle, varContext, textProps, innerStyle, enableFastImage }) {
     const children = wrapChildren(props, {
         hasVarDec,
         varContext,
@@ -523,13 +540,13 @@ function wrapWithChildren(props, { hasVarDec, enableBackground, textStyle, backg
         textProps
     });
     return [
-        enableBackground ? wrapImage(backgroundStyle) : null,
+        enableBackground ? wrapImage(backgroundStyle, innerStyle, enableFastImage) : null,
         children
     ];
 }
 const _View = forwardRef((viewProps, ref) => {
     const { textProps, innerProps: props = {} } = splitProps(viewProps);
-    let { style = {}, 'hover-style': hoverStyle, 'hover-start-time': hoverStartTime = 50, 'hover-stay-time': hoverStayTime = 400, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'enable-background': enableBackground, 'enable-animation': enableAnimation, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, animation } = props;
+    let { style = {}, 'hover-style': hoverStyle, 'hover-start-time': hoverStartTime = 50, 'hover-stay-time': hoverStayTime = 400, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'enable-background': enableBackground, 'enable-fast-image': enableFastImage, 'enable-animation': enableAnimation, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, animation } = props;
     const [isHover, setIsHover] = useState(false);
     // 默认样式
     const defaultStyle = {
@@ -595,9 +612,20 @@ const _View = forwardRef((viewProps, ref) => {
     }
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
     const viewStyle = Object.assign({}, innerStyle, layoutStyle);
+    enableAnimation = enableAnimation || !!animation;
+    const enableAnimationRef = useRef(enableAnimation);
+    if (enableAnimationRef.current !== enableAnimation) {
+        throw new Error('[Mpx runtime error]: animation use should be stable in the component lifecycle, or you can set [enable-animation] with true.');
+    }
+    const finalStyle = enableAnimation
+        ? useAnimationHooks({
+            animation,
+            style: viewStyle
+        })
+        : viewStyle;
     const innerProps = useInnerProps(props, {
         ref: nodeRef,
-        style: viewStyle,
+        style: finalStyle,
         ...layoutProps,
         ...(hoverStyle && {
             bindtouchstart: onTouchStart,
@@ -611,27 +639,18 @@ const _View = forwardRef((viewProps, ref) => {
     ], {
         layoutRef
     });
-    enableAnimation = enableAnimation || !!animation;
-    const enableAnimationRef = useRef(enableAnimation);
-    if (enableAnimationRef.current !== enableAnimation) {
-        throw new Error('[Mpx runtime error]: animation use should be stable in the component lifecycle, or you can set [enable-animation] with true.');
-    }
-    const finalStyle = enableAnimation
-        ? useAnimationHooks({
-            animation,
-            style: viewStyle
-        })
-        : viewStyle;
     const childNode = wrapWithChildren(props, {
         hasVarDec,
         enableBackground: enableBackgroundRef.current,
         textStyle,
         backgroundStyle,
         varContext: varContextRef.current,
-        textProps
+        textProps,
+        innerStyle,
+        enableFastImage
     });
-    return animation?.actions?.length
-        ? (<Animated.View {...innerProps} style={finalStyle}>
+    return enableAnimation
+        ? (<Animated.View {...innerProps}>
       {childNode}
     </Animated.View>)
         : (<View {...innerProps}>