@mpxjs/webpack-plugin 2.9.69-beta.0 → 2.9.69-beta.1

package/lib/index.js

@@ -54,11 +54,13 @@ const wxssLoaderPath = normalize.lib('wxss/index')
 const wxmlLoaderPath = normalize.lib('wxml/loader')
 const wxsLoaderPath = normalize.lib('wxs/loader')
 const styleCompilerPath = normalize.lib('style-compiler/index')
+const styleStripConditaionalPath = normalize.lib('style-compiler/strip-conditional-loader')
 const templateCompilerPath = normalize.lib('template-compiler/index')
 const jsonCompilerPath = normalize.lib('json-compiler/index')
 const jsonThemeCompilerPath = normalize.lib('json-compiler/theme')
 const jsonPluginCompilerPath = normalize.lib('json-compiler/plugin')
 const extractorPath = normalize.lib('extractor')
+const selectorPath = normalize.lib('selector')
 const async = require('async')
 const { parseQuery } = require('loader-utils')
 const stringifyLoadersAndResource = require('./utils/stringify-loaders-resource')
@@ -1775,7 +1777,7 @@ try {
       })
 
       const typeLoaderProcessInfo = {
-        styles: ['node_modules/css-loader', wxssLoaderPath, styleCompilerPath],
+        styles: ['node_modules/css-loader', wxssLoaderPath, styleCompilerPath, styleStripConditaionalPath],
         template: ['node_modules/html-loader', wxmlLoaderPath, templateCompilerPath]
       }
 
@@ -1833,6 +1835,20 @@ try {
               loader: extractorPath
             })
           }
+          if (type === 'styles') {
+            // 判断最后一个loader是否是 selectorPath, 如果是，则在sectorPath之前插入strip-conditional
+            const lastLoader = loaders[loaders.length - 1]
+            if (lastLoader.loader.includes(selectorPath)) {
+              loaders.splice(loaders.length - 1, 0, {
+                loader: styleStripConditaionalPath
+              })
+            } else {
+              // 在最后一个插入strip-conditional
+              loaders.push({
+                loader: styleStripConditaionalPath
+              })
+            }
+          }
           createData.resource = addQuery(createData.resource, { mpx: MPX_PROCESSED_FLAG }, true)
         }
         // mpxStyleOptions 为 mpx style 文件的标识，避免 Vue 文件插入 styleCompiler 后导致 vue scoped 样式隔离失效

package/lib/platform/style/wx/index.js

@@ -374,11 +374,11 @@ module.exports = function getSpec ({ warn, error }) {
   // transform 转换
   const formatTransform = ({ prop, value, selector }, { mode }) => {
     // css var & 数组直接返回
-    if (Array.isArray(value) || calcExp.test(value)) return { prop, value }
+    if (Array.isArray(value) || cssVariableExp.test(value)) return { prop, value }
     const values = parseValues(value)
     const transform = []
     values.forEach(item => {
-      const match = item.match(/([/\w]+)\(([^)]+)\)/)
+      const match = item.match(/([/\w]+)\((.+)\)/)
       if (match && match.length >= 3) {
         let key = match[1]
         const val = match[2]
@@ -407,23 +407,23 @@ module.exports = function getSpec ({ warn, error }) {
           case 'rotate3d': // x y z angle
           case 'translate3d': // x y 支持 z不支持
           case 'scale3d': // x y 支持 z不支持
-            {
-              // 2 个以上的值处理
-              key = key.replace('3d', '')
-              const vals = parseValues(val, ',').splice(0, key === 'rotate' ? 4 : 3)
-              // scale(.5) === scaleX(.5) scaleY(.5)
-              if (vals.length === 1 && key === 'scale') {
-                vals.push(vals[0])
-              }
-              const xyz = ['X', 'Y', 'Z']
-              transform.push(...vals.map((v, index) => {
-                if (key !== 'rotate' && index > 1) {
-                  unsupportedPropError({ prop: `${key}Z`, value, selector }, { mode })
-                }
-                return { [`${key}${xyz[index] || ''}`]: v.trim() }
-              }))
-              break
+          {
+            // 2 个以上的值处理
+            key = key.replace('3d', '')
+            const vals = parseValues(val, ',').splice(0, key === 'rotate' ? 4 : 3)
+            // scale(.5) === scaleX(.5) scaleY(.5)
+            if (vals.length === 1 && key === 'scale') {
+              vals.push(vals[0])
             }
+            const xyz = ['X', 'Y', 'Z']
+            transform.push(...vals.map((v, index) => {
+              if (key !== 'rotate' && index > 1) {
+                unsupportedPropError({ prop: `${key}Z`, value, selector }, { mode })
+              }
+              return { [`${key}${xyz[index] || ''}`]: v.trim() }
+            }))
+            break
+          }
           case 'translateZ':
           case 'scaleZ':
           default:

package/lib/platform/template/wx/component-config/movable-view.js

@@ -2,6 +2,8 @@ const TAG_NAME = 'movable-view'
 
 module.exports = function ({ print }) {
   const aliEventLog = print({ platform: 'ali', tag: TAG_NAME, isError: false, type: 'event' })
+  const androidEventLog = print({ platform: 'android', tag: TAG_NAME, isError: false, type: 'event' })
+  const iosEventLog = print({ platform: 'ios', tag: TAG_NAME, isError: false, type: 'event' })
   const qaPropLog = print({ platform: 'qa', tag: TAG_NAME, isError: false })
   const androidPropLog = print({ platform: 'android', tag: TAG_NAME, isError: false })
   const iosPropLog = print({ platform: 'ios', tag: TAG_NAME, isError: false })
@@ -27,7 +29,7 @@ module.exports = function ({ print }) {
         android: androidPropLog
       },
       {
-        test: /^(inertia|damping|animation)$/,
+        test: /^(damping|friction|scale|scale-min|scale-max|scale-value)$/,
         ios: iosPropLog,
         android: androidPropLog
       }
@@ -36,6 +38,11 @@ module.exports = function ({ print }) {
       {
         test: /^(htouchmove|vtouchmove)$/,
         ali: aliEventLog
+      },
+      {
+        test: /^(bindscale)$/,
+        ios: iosEventLog,
+        android: androidEventLog
       }
     ]
   }

package/lib/platform/template/wx/component-config/scroll-view.js

@@ -53,7 +53,7 @@ module.exports = function ({ print }) {
         qa: qaPropLog
       },
       {
-        test: /^(scroll-into-view|refresher-threshold|enable-passive|scroll-anchoring|using-sticky|fast-deceleration|enable-flex)$/,
+        test: /^(refresher-threshold|enable-passive|scroll-anchoring|using-sticky|fast-deceleration|enable-flex)$/,
         android: androidPropLog,
         ios: iosPropLog
       },

package/lib/resolver/AddEnvPlugin.js

@@ -34,6 +34,7 @@ module.exports = class AddEnvPlugin {
       if (!extname || !matchCondition(resourcePath, this.fileConditionRules)) return callback()
       const queryObj = parseQuery(request.query || '?')
       queryObj.infix = `${queryObj.infix || ''}.${env}`
+      // css | stylus | less | sass 中 import file 过滤query，避免在对应的 loader 中无法读取到文件
       obj.query = stringifyQuery(queryObj)
       obj.path = addInfix(resourcePath, env, extname)
       obj.relativePath = request.relativePath && addInfix(request.relativePath, env, extname)

package/lib/resolver/AddModePlugin.js

@@ -43,6 +43,7 @@ module.exports = class AddModePlugin {
       resolver.doResolve(target, Object.assign({}, request, obj), 'add mode: ' + mode, resolveContext, (err, result) => {
         if (defaultMode && !result) {
           queryObj.infix = `${queryInfix || ''}.${defaultMode}`
+          // css | stylus | less | sass 中 import file 过滤query，避免在对应的 loader 中无法读取到文件
           obj.query = stringifyQuery(queryObj)
           obj.path = addInfix(resourcePath, defaultMode, extname)
           resolver.doResolve(target, Object.assign({}, request, obj), 'add mode: ' + defaultMode, resolveContext, (err, result) => {

package/lib/runtime/components/react/context.ts

@@ -33,6 +33,10 @@ export interface IntersectionObserver {
   }
 }
 
+export interface ScrollViewContextValue {
+   gestureRef: React.RefObject<any> | null
+}
+
 export const MovableAreaContext = createContext({ width: 0, height: 0 })
 
 export const FormContext = createContext<FormContextValue | null>(null)
@@ -51,4 +55,8 @@ export const IntersectionObserverContext = createContext<IntersectionObserver |
 
 export const RouteContext = createContext<number | null>(null)
 
+export const SwiperContext = createContext({})
+
 export const KeyboardAvoidContext = createContext<KeyboardAvoidContextValue | null>(null)
+
+export const ScrollViewContext = createContext<ScrollViewContextValue>({ gestureRef: null })

package/lib/runtime/components/react/dist/context.js

@@ -8,4 +8,6 @@ export const PickerContext = createContext(null);
 export const VarContext = createContext({});
 export const IntersectionObserverContext = createContext(null);
 export const RouteContext = createContext(null);
+export const SwiperContext = createContext({});
 export const KeyboardAvoidContext = createContext(null);
+export const ScrollViewContext = createContext({ gestureRef: null });

package/lib/runtime/components/react/dist/getInnerListeners.js

@@ -213,7 +213,6 @@ const useInnerProps = (props = {}, additionalProps = {}, userRemoveProps = [], r
     const eventConfig = {};
     const config = rawConfig || {
         layoutRef: { current: {} },
-        disableTouch: false,
         disableTap: false
     };
     const removeProps = [
@@ -237,10 +236,10 @@ const useInnerProps = (props = {}, additionalProps = {}, userRemoveProps = [], r
             rawEventKeys.push(key);
         }
     }
-    if (!rawEventKeys.length || config.disableTouch) {
-        return omit(propsRef.current, removeProps);
-    }
     const events = useMemo(() => {
+        if (!rawEventKeys.length) {
+            return {};
+        }
         const transformedEventKeys = rawEventKeys.reduce((acc, key) => {
             if (propsRef.current[key]) {
                 return acc.concat(eventConfig[key]);

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

@@ -54,7 +54,7 @@ const keyboardTypeMap = {
     }) || ''
 };
 const Input = forwardRef((props, ref) => {
-    const { style = {}, allowFontScaling = false, type = 'text', value, password, 'placeholder-style': placeholderStyle, disabled, maxlength = 140, 'auto-focus': autoFocus, focus, 'confirm-type': confirmType = 'done', 'confirm-hold': confirmHold = false, cursor, 'cursor-color': cursorColor, 'selection-start': selectionStart = -1, 'selection-end': selectionEnd = -1, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'adjust-position': adjustPosition = true, bindinput, bindfocus, bindblur, bindconfirm, bindselectionchange, 
+    const { style = {}, allowFontScaling = false, type = 'text', value, password, 'placeholder-style': placeholderStyle, disabled, maxlength = 140, 'auto-focus': autoFocus, focus, 'confirm-type': confirmType = 'done', 'confirm-hold': confirmHold = false, cursor, 'cursor-color': cursorColor, 'selection-start': selectionStart = -1, 'selection-end': selectionEnd = -1, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'adjust-position': adjustPosition = false, bindinput, bindfocus, bindblur, bindconfirm, bindselectionchange, 
     // private
     multiline, 'auto-height': autoHeight, bindlinechange } = props;
     const formContext = useContext(FormContext);

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

@@ -11,7 +11,7 @@
  * ✘ scale-min
  * ✘ scale-max
  * ✘ scale-value
- * ✘ animation
+ * ✔ animation
  * ✔ bindchange
  * ✘ bindscale
  * ✔ htouchmove

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

@@ -1,8 +1,7 @@
 import React, { forwardRef, useRef, useState, useMemo, useEffect, useCallback } from 'react';
-import { Platform, SafeAreaView, StyleSheet } from 'react-native';
+import { SafeAreaView, StyleSheet } from 'react-native';
 import Reanimated, { useAnimatedRef, useScrollViewOffset } from 'react-native-reanimated';
-import { vibrateShort } from '@mpxjs/api-proxy';
-import { useTransformStyle, splitStyle, splitProps, useLayout, usePrevious } from './utils';
+import { useTransformStyle, splitStyle, splitProps, useLayout, usePrevious, isAndroid } from './utils';
 import useNodesRef from './useNodesRef';
 import PickerOverlay from './pickerViewOverlay';
 import PickerMask from './pickerViewMask';
@@ -39,13 +38,13 @@ const _PickerViewColumn = forwardRef((props, ref) => {
         setHeight,
         nodeRef: scrollViewRef
     });
-    // console.log('[mpx-picker-view-column], render ---> columnIndex=', columnIndex, 'initialIndex=', initialIndex, 'columnData=', columnData.length)
+    // console.log('[mpx-picker-view-column], render ---> columnIndex=', columnIndex, 'initialIndex=', initialIndex, 'columnData=', columnData.length, 'pickerH=', pickerH, 'itemRawH=', itemRawH, 'itemHeight=', itemHeight)
     // const initialOffset = useMemo(() => ({
     //   x: 0,
     //   y: itemRawH * initialIndex
     // }), [itemRawH])
+    const paddingHeight = useMemo(() => Math.round((pickerH - itemHeight) / 2), [pickerH, itemHeight]);
     const snapToOffsets = useMemo(() => columnData.map((_, i) => i * itemRawH), [columnData, itemRawH]);
-    const paddingHeight = useMemo(() => Math.round((pickerH - itemRawH) / 2), [pickerH, itemRawH]);
     const contentContainerStyle = useMemo(() => {
         return [{ paddingVertical: paddingHeight }];
     }, [paddingHeight]);
@@ -54,6 +53,7 @@ const _PickerViewColumn = forwardRef((props, ref) => {
         return Math.max(0, Math.min(calc, maxIndex));
     }, [itemRawH, maxIndex]);
     useEffect(() => {
+        // console.log('[mpx-picker-view-column], useEffect000 --->', 'columnIndex=', columnIndex, 'initialIndex=', initialIndex, 'prevIndex=', prevIndex, 'activeIndex=', activeIndex.current, 'maxIndex=', maxIndex, 'prevMaxIndex=', prevMaxIndex)
         if (!scrollViewRef.current ||
             !itemRawH ||
             touching.current ||
@@ -71,12 +71,12 @@ const _PickerViewColumn = forwardRef((props, ref) => {
                 y: itemRawH * initialIndex,
                 animated: false
             });
-        }, 0);
+        }, isAndroid ? 200 : 0);
         activeIndex.current = initialIndex;
     }, [itemRawH, initialIndex]);
     const onContentSizeChange = (_w, h) => {
         const y = itemRawH * initialIndex;
-        // console.log('[mpx-picker-view-column], onContentSizeChange --->', 'columnIndex=', columnIndex, '_w=', _w, 'h=', h, 'y=', y)
+        // console.log('[mpx-picker-view-column], onContentSizeChange --->', 'columnIndex=', columnIndex, '_w=', _w, 'h=', h, 'y=', y, 'itemRawH=', itemRawH)
         if (y <= h) {
             setTimeout(() => {
                 scrollViewRef.current?.scrollTo({ x: 0, y, animated: false });
@@ -84,9 +84,13 @@ const _PickerViewColumn = forwardRef((props, ref) => {
         }
     };
     const onScrollViewLayout = (e) => {
+        if (isAndroid) {
+            return;
+        }
+        // RN iOS bug: https://github.com/facebook/react-native/issues/36135
         const { width } = e.nativeEvent.layout;
         const widthInt = Math.ceil(width);
-        // console.log('[mpx-picker-view-column], onScrollViewLayout --->', 'columnIndex=', columnIndex, 'widthInt=', widthInt, 'scrollViewWidth=', scrollViewWidth)
+        // console.log('[mpx-picker-view-column], onScrollViewLayout --->', 'columnIndex=', columnIndex, 'width=', width, 'widthInt=', widthInt, 'scrollViewWidth=', scrollViewWidth)
         if (widthInt !== scrollViewWidth) {
             const maxW = maxScrollViewWidth.current;
             if (maxW !== -1 && widthInt > maxW) {
@@ -103,6 +107,7 @@ const _PickerViewColumn = forwardRef((props, ref) => {
     };
     const onItemLayout = (e) => {
         const { height: rawH } = e.nativeEvent.layout;
+        // console.log('[mpx-picker-view-column], onItemLayout --->', 'columnIndex=', columnIndex, 'width=', width)
         if (rawH && itemRawH !== rawH) {
             setItemRawH(rawH);
         }
@@ -137,7 +142,12 @@ const _PickerViewColumn = forwardRef((props, ref) => {
         }
     };
     const onScroll = (e) => {
-        if (Platform.OS === 'android') {
+        if (isAndroid) {
+            return;
+        }
+        // 全局注册的震动触感 hook
+        const pickerVibrate = global.__mpx.config.rnConfig.pickerVibrate;
+        if (typeof pickerVibrate !== 'function') {
             return;
         }
         const { y } = e.nativeEvent.contentOffset;
@@ -150,7 +160,8 @@ const _PickerViewColumn = forwardRef((props, ref) => {
                         index: currentId,
                         y: currentId * itemRawH
                     };
-                    vibrateShort({ type: 'selection' });
+                    // vibrateShort({ type: 'selection' })
+                    pickerVibrate();
                 }
             }
         }

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

@@ -45,7 +45,7 @@ const _PickerView = forwardRef((props, ref) => {
     };
     const onInitialChange = (isInvalid, value) => {
         if (isInvalid || !snapActiveValueRef.current || hasDiff(snapActiveValueRef.current, value)) {
-            console.log('[mpx-picker-view], onInitialChange-1 ===> value=', value);
+            console.log('[mpx-picker-view], onInitialChange ===> value=', value);
             const eventData = getCustomEvent('change', {}, { detail: { value, source: 'change' }, layoutRef });
             bindchange?.(eventData);
             snapActiveValueRef.current = value.slice();

package/lib/runtime/components/react/dist/mpx-rich-text/index.jsx

@@ -2,10 +2,10 @@
  * ✔ nodes
  */
 import { View } from 'react-native';
-import { useRef, forwardRef, useState } from 'react';
+import { useRef, forwardRef, useState, createElement } from 'react';
 import useInnerProps from '../getInnerListeners';
 import useNodesRef from '../useNodesRef'; // 引入辅助函数
-import { useTransformStyle, useLayout } from '../utils';
+import { useTransformStyle, useLayout, extendObject } from '../utils';
 import { WebView } from 'react-native-webview';
 import { generateHTML } from './html';
 function jsonToHtmlStr(elements) {
@@ -44,20 +44,19 @@ const _RichText = forwardRef((props, ref) => {
     useNodesRef(props, ref, nodeRef, {
         layoutRef
     });
-    const innerProps = useInnerProps(props, {
+    const innerProps = useInnerProps(props, extendObject({
         ref: nodeRef,
-        style: { ...normalStyle, ...layoutStyle },
-        ...layoutProps
-    }, [], {
+        style: extendObject(normalStyle, layoutStyle)
+    }, layoutProps), [], {
         layoutRef
     });
     const html = typeof nodes === 'string' ? nodes : jsonToHtmlStr(nodes);
-    return (<View {...innerProps}>
-      <WebView source={{ html: generateHTML(html) }} onMessage={(event) => {
+    return createElement(View, innerProps, createElement(WebView, {
+        source: { html: generateHTML(html) },
+        onMessage: (event) => {
             setWebViewHeight(+event.nativeEvent.data);
-        }}>
-      </WebView>
-    </View>);
+        }
+    }));
 });
 _RichText.displayName = 'mpx-rich-text';
 export default _RichText;

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

@@ -33,13 +33,13 @@
  */
 import { ScrollView } from 'react-native-gesture-handler';
 import { RefreshControl } from 'react-native';
-import { useRef, useState, useEffect, forwardRef, useContext, createElement } from 'react';
+import { useRef, useState, useEffect, forwardRef, useContext, createElement, useMemo } from 'react';
 import { useAnimatedRef } from 'react-native-reanimated';
 import { warn } from '@mpxjs/utils';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
 import { splitProps, splitStyle, useTransformStyle, useLayout, wrapChildren, extendObject, flatGesture } from './utils';
-import { IntersectionObserverContext } from './context';
+import { IntersectionObserverContext, ScrollViewContext } from './context';
 const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
     const { textProps, innerProps: props = {} } = splitProps(scrollViewProps);
     const { enhanced = false, bounces = true, style = {}, binddragstart, binddragging, binddragend, bindtouchstart, bindtouchmove, bindtouchend, 'scroll-x': scrollX = false, 'scroll-y': scrollY = false, 'enable-back-to-top': enableBackToTop = false, 'enable-trigger-intersection-observer': enableTriggerIntersectionObserver = false, 'paging-enabled': pagingEnabled = false, 'upper-threshold': upperThreshold = 50, 'lower-threshold': lowerThreshold = 50, 'scroll-with-animation': scrollWithAnimation, 'refresher-enabled': refresherEnabled, 'refresher-default-style': refresherDefaultStyle, 'refresher-background': refresherBackground, 'show-scrollbar': showScrollbar = true, 'scroll-into-view': scrollIntoView = '', 'scroll-top': scrollTop = 0, 'scroll-left': scrollLeft = 0, 'refresher-triggered': refresherTriggered, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'simultaneous-handlers': originSimultaneousHandlers, 'wait-for': waitFor, __selectRef } = props;
@@ -78,6 +78,11 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         },
         gestureRef: scrollViewRef
     });
+    const contextValue = useMemo(() => {
+        return {
+            gestureRef: scrollViewRef
+        };
+    }, []);
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: scrollViewRef, onLayout });
     if (scrollX && scrollY) {
         warn('scroll-x and scroll-y cannot be set to true at the same time, Mpx will use the value of scroll-y as the criterion');
@@ -342,12 +347,12 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
                 onRefresh: onRefresh
             }, (refresherDefaultStyle && refresherDefaultStyle !== 'none' ? { colors: refreshColor[refresherDefaultStyle] } : null)))
             : undefined
-    }), wrapChildren(props, {
+    }), createElement(ScrollViewContext.Provider, { value: contextValue }, wrapChildren(props, {
         hasVarDec,
         varContext: varContextRef.current,
         textStyle,
         textProps
-    }));
+    })));
 });
 _ScrollView.displayName = 'MpxScrollView';
 export default _ScrollView;

package/lib/runtime/components/react/dist/mpx-swiper-item.jsx

@@ -1,10 +1,15 @@
-import { View } from 'react-native';
-import { forwardRef, useRef } from 'react';
+import Animated, { useAnimatedStyle, interpolate } from 'react-native-reanimated';
+import { forwardRef, useRef, useContext } from 'react';
 import useInnerProps from './getInnerListeners';
 import useNodesRef from './useNodesRef'; // 引入辅助函数
 import { useTransformStyle, splitStyle, splitProps, wrapChildren, useLayout } from './utils';
+import { SwiperContext } from './context';
 const _SwiperItem = forwardRef((props, ref) => {
-    const { 'enable-var': enableVar, 'external-var-context': externalVarContext, style } = props;
+    const { 'enable-var': enableVar, 'external-var-context': externalVarContext, style, customStyle, itemIndex } = props;
+    const contextValue = useContext(SwiperContext);
+    const offset = contextValue.offset || 0;
+    const step = contextValue.step || 0;
+    const scale = contextValue.scale || false;
     const { textProps } = splitProps(props);
     const nodeRef = useRef(null);
     const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext });
@@ -16,21 +21,33 @@ const _SwiperItem = forwardRef((props, ref) => {
     // 存储layout布局信息
     layoutRef, layoutProps, layoutStyle } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: nodeRef });
     const innerProps = useInnerProps(props, {
-        style: { ...innerStyle, ...layoutStyle },
         ref: nodeRef,
         ...layoutProps
     }, [
         'children',
-        'enable-offset'
+        'enable-offset',
+        'style'
     ], { layoutRef });
-    return (<View data-itemId={props['item-id']} {...innerProps}>
-       {wrapChildren(props, {
+    const itemAnimatedStyle = useAnimatedStyle(() => {
+        if (!step.value)
+            return {};
+        const inputRange = [step.value, 0];
+        const outputRange = [0.7, 1];
+        return {
+            transform: [{
+                    scale: interpolate(Math.abs(Math.abs(offset.value) - itemIndex * step.value), inputRange, outputRange)
+                }]
+        };
+    });
+    const mergeStyle = [innerStyle, layoutStyle, { width: '100%', height: '100%' }, scale ? itemAnimatedStyle : {}].concat(customStyle);
+    return (<Animated.View {...innerProps} style={mergeStyle} data-itemId={props['item-id']}>
+      {wrapChildren(props, {
             hasVarDec,
             varContext: varContextRef.current,
             textStyle,
             textProps
         })}
-    </View>);
+    </Animated.View>);
 });
 _SwiperItem.displayName = 'MpxSwiperItem';
 export default _SwiperItem;