@mpxjs/webpack-plugin 2.10.16-beta.7 → 2.10.16-perf.1

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

@@ -62,8 +62,8 @@ export interface ImageProps {
 }
 
 interface ImageState {
-  viewWidth: number
-  viewHeight: number
+  viewWidth?: number
+  viewHeight?: number
   imageWidth?: number
   imageHeight?: number
   ratio?: number
@@ -93,20 +93,9 @@ const ModeMap = new Map<Mode, ImageResizeMode | undefined>([
   ...cropMode.map<[Mode, ImageResizeMode]>(mode => [mode, 'stretch'])
 ])
 
-const isNumber = (value: DimensionValue): value is number => typeof value === 'number'
+const isNumber = (value: DimensionValue) => typeof value === 'number'
 
-const relativeCenteredSize = (viewSize: number, imageSize: number) => {
-  return (viewSize - imageSize) / 2
-}
-
-// 获取能完全显示图片的缩放比例：长宽方向的缩放比例最小值即为能完全展示的比例
-function getFitScale (width1: number, height1: number, width2: number, height2: number) {
-  return Math.min(width2 / width1, height2 / height1)
-}
-
-function getFillScale (width1: number, height1: number, width2: number, height2: number) {
-  return Math.max(width2 / width1, height2 / height1)
-}
+const relativeCenteredSize = (viewSize: number, imageSize: number) => (viewSize - imageSize) / 2
 
 function noMeetCalcRule (isSvg: boolean, mode: Mode, viewWidth: number, viewHeight: number, ratio: number) {
   const isMeetSize = viewWidth && viewHeight && ratio
@@ -115,17 +104,6 @@ function noMeetCalcRule (isSvg: boolean, mode: Mode, viewWidth: number, viewHeig
   return false
 }
 
-const getFixedWidth = (viewWidth: number, viewHeight: number, ratio: number) => {
-  if (!ratio) return viewWidth
-  const fixed = viewHeight / ratio
-  return !fixed ? viewWidth : fixed
-}
-
-const getFixedHeight = (viewWidth: number, viewHeight: number, ratio: number) => {
-  const fixed = viewWidth * ratio
-  return !fixed ? viewHeight : fixed
-}
-
 const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, ref): JSX.Element => {
   const {
     src = '',
@@ -153,6 +131,8 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
     { overflow: 'hidden' }
   )
 
+  const state = useRef<ImageState>({})
+
   const nodeRef = useRef(null)
   useNodesRef(props, ref, nodeRef, {
     defaultStyle
@@ -168,18 +148,14 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
   const onLayout = ({ nativeEvent: { layout: { width, height } } }: LayoutChangeEvent) => {
     state.current.viewWidth = width
     state.current.viewHeight = height
-    // 实际渲染尺寸可能会指定的值不一致，误差低于 0.5 则认为没有变化
-    if (Math.abs(viewHeight - height) < 0.5 && Math.abs(viewWidth - width) < 0.5) {
-      if (state.current.imageWidth && state.current.imageHeight && state.current.ratio) {
-        if (!loaded) setLoaded(true)
-      }
-      return
-    }
+
     if (state.current.imageWidth && state.current.imageHeight && state.current.ratio) {
+      setViewWidth(width)
+      setViewHeight(height)
       setRatio(state.current.ratio)
       setImageWidth(state.current.imageWidth)
       setImageHeight(state.current.imageHeight)
-      setViewSize(state.current.viewWidth!, state.current.viewHeight!, state.current.ratio!)
+      state.current = {}
       setLoaded(true)
     }
   }
@@ -210,57 +186,43 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
   const [ratio, setRatio] = useState(0)
   const [loaded, setLoaded] = useState(!isLayoutMode)
 
-  const state = useRef<ImageState>({
-    viewWidth,
-    viewHeight
-  })
+  const fixedHeight = useMemo(() => {
+    const fixed = viewWidth * ratio
+    return !fixed ? viewHeight : fixed
+  }, [ratio, viewWidth, viewHeight])
 
-  function setViewSize (viewWidth: number, viewHeight: number, ratio: number) {
-    // 在特定模式下可预测 view 的变化，在onLayout触发时能以此避免重复render
-    switch (mode) {
-      case 'widthFix': {
-        setViewWidth(viewWidth)
-        const fixedHeight = getFixedHeight(viewWidth, viewHeight, ratio)
-        setViewHeight(fixedHeight)
-        break
-      }
-      case 'heightFix': {
-        setViewHeight(viewHeight)
-        const fixedWidth = getFixedWidth(viewWidth, viewHeight, ratio)
-        setViewWidth(fixedWidth)
-        break
-      }
-      default:
-        setViewHeight(viewHeight)
-        setViewWidth(viewWidth)
-        break
-    }
-  }
+  const fixedWidth = useMemo(() => {
+    if (!ratio) return viewWidth
+    const fixed = viewHeight / ratio
+    return !fixed ? viewWidth : fixed
+  }, [ratio, viewWidth, viewHeight])
 
   const modeStyle: ImageStyle = useMemo(() => {
     if (noMeetCalcRule(isSvg, mode, viewWidth, viewHeight, ratio)) return {}
     switch (mode) {
-      case 'scaleToFill': // wx 中 svg 图片的 scaleToFill 模式效果与 aspectFit 一致，不会就行图片缩放，此处保持一致
+      case 'scaleToFill':
       case 'aspectFit':
         if (isSvg) {
-          const scale = getFitScale(imageWidth, imageHeight, viewWidth, viewHeight)
+          const scale = ratio <= 1
+            ? imageWidth >= viewWidth ? viewWidth / imageWidth : imageWidth / viewWidth
+            : imageHeight >= viewHeight ? viewHeight / imageHeight : imageHeight / viewHeight
           return {
             transform: [
-              { translateY: relativeCenteredSize(viewHeight, imageHeight * scale) },
-              { translateX: relativeCenteredSize(viewWidth, imageWidth * scale) },
-              { scale }
+              { scale },
+              ratio <= 1 ? { translateY: -(imageHeight * scale - viewHeight) / 2 / scale } : { translateX: -(imageWidth * scale - viewWidth) / 2 / scale }
             ]
           }
         }
         return {}
       case 'aspectFill':
         if (isSvg) {
-          const scale = getFillScale(imageWidth, imageHeight, viewWidth, viewHeight)
+          const scale = ratio >= 1
+            ? imageWidth >= viewWidth ? viewWidth / imageWidth : imageWidth / viewWidth
+            : imageHeight >= viewHeight ? viewHeight / imageHeight : imageHeight / viewHeight
           return {
             transform: [
-              { translateY: relativeCenteredSize(viewHeight, imageHeight * scale) },
-              { translateX: relativeCenteredSize(viewWidth, imageWidth * scale) },
-              { scale }
+              { scale },
+              ratio >= 1 ? { translateY: -(imageHeight * scale - viewHeight) / 2 / scale } : { translateX: -(imageWidth * scale - viewWidth) / 2 / scale }
             ]
           }
         }
@@ -268,7 +230,9 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
       case 'widthFix':
       case 'heightFix':
         if (isSvg) {
-          const scale = getFitScale(imageWidth, imageHeight, viewWidth, viewHeight)
+          const scale = ratio >= 1
+            ? imageWidth >= fixedWidth ? fixedWidth / imageWidth : imageWidth / fixedWidth
+            : imageHeight >= fixedHeight ? fixedHeight / imageHeight : imageHeight / fixedHeight
           return {
             transform: [{ scale }]
           }
@@ -331,25 +295,13 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
       default:
         return {}
     }
-  }, [isSvg, mode, viewWidth, viewHeight, imageWidth, imageHeight, ratio])
+  }, [isSvg, mode, viewWidth, viewHeight, imageWidth, imageHeight, ratio, fixedWidth, fixedHeight])
 
   const onSvgLoad = (evt: LayoutChangeEvent) => {
     const { width, height } = evt.nativeEvent.layout
-    state.current.imageHeight = height
+    setRatio(!width ? 0 : height / width)
+    setImageWidth(width)
     setImageHeight(height)
-    state.current.ratio = !width ? 0 : 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(
@@ -423,11 +375,12 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
             : isHeightFixMode
               ? state.current.viewHeight
               : state.current.viewWidth && state.current.viewHeight) {
-            setRatio(state.current.ratio)
+            state.current.viewWidth && setViewWidth(state.current.viewWidth)
+            state.current.viewHeight && setViewHeight(state.current.viewHeight)
+            setRatio(!width ? 0 : height / width)
             setImageWidth(width)
             setImageHeight(height)
-            setViewSize(state.current.viewWidth!, state.current.viewHeight!, state.current.ratio!)
-
+            state.current = {}
             setLoaded(true)
           }
         },
@@ -449,8 +402,8 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
           {},
           normalStyle,
           layoutStyle,
-          isHeightFixMode ? { width: viewWidth } : {},
-          isWidthFixMode ? { height: viewHeight } : {}
+          isHeightFixMode ? { width: fixedWidth } : {},
+          isWidthFixMode ? { height: fixedHeight } : {}
         )
       }
     ),
@@ -464,44 +417,50 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
     }
   )
 
-  const SvgImage = createElement(
-    View,
-    innerProps,
-    createElement(SvgCssUri, {
-      uri: src,
-      onLayout: onSvgLoad,
-      onError: binderror && onSvgError,
-      style: extendObject(
-        { transformOrigin: 'left top' },
-        modeStyle
-      )
-    })
-  )
-
-  const BaseImage = renderImage(
-    extendObject(
-      {
-        source: { uri: src },
-        resizeMode: resizeMode,
-        onLoad: bindload && onImageLoad,
-        onError: binderror && onImageError,
+  function renderSvgImage () {
+    return createElement(
+      View,
+      innerProps,
+      createElement(SvgCssUri, {
+        uri: src,
+        onLayout: onSvgLoad,
+        onError: binderror && onSvgError,
         style: extendObject(
-          {
-            transformOrigin: 'left top',
-            width: isCropMode ? imageWidth : '100%',
-            height: isCropMode ? imageHeight : '100%'
-          },
-          isCropMode ? modeStyle : {}
+          { transformOrigin: 'left top' },
+          modeStyle
         )
-      },
-      isLayoutMode ? {} : innerProps
-    ),
-    enableFastImage
-  )
+      })
+    )
+  }
+
+  function renderBaseImage () {
+    return renderImage(
+      extendObject(
+        {
+          source: { uri: src },
+          resizeMode: resizeMode,
+          onLoad: bindload && onImageLoad,
+          onError: binderror && onImageError,
+          style: extendObject(
+            {
+              transformOrigin: 'left top',
+              width: isCropMode ? imageWidth : '100%',
+              height: isCropMode ? imageHeight : '100%'
+            },
+            isCropMode ? modeStyle : {}
+          )
+        },
+        isLayoutMode ? {} : innerProps
+      ),
+      enableFastImage
+    )
+  }
 
-  const LayoutImage = createElement(View, innerProps, loaded && BaseImage)
+  function renderLayoutImage () {
+    return createElement(View, innerProps, loaded && renderBaseImage())
+  }
 
-  const finalComponent = isSvg ? SvgImage : isLayoutMode ? LayoutImage : BaseImage
+  const finalComponent = isSvg ? renderSvgImage() : isLayoutMode ? renderLayoutImage() : renderBaseImage()
 
   if (hasPositionFixed) {
     return createElement(Portal, null, finalComponent)

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

@@ -280,8 +280,8 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
   }
 
   const setKeyboardAvoidContext = () => {
-    if (keyboardAvoid) {
-      keyboardAvoid.current = { cursorSpacing, ref: nodeRef, adjustPosition }
+    if (adjustPosition && keyboardAvoid) {
+      keyboardAvoid.current = { cursorSpacing, ref: nodeRef }
     }
   }
 
@@ -295,45 +295,20 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
   }
 
   const onFocus = (evt: NativeSyntheticEvent<TextInputFocusEventData>) => {
-    if (!keyboardAvoid?.current) {
-      setKeyboardAvoidContext()
-    }
-
-    if (bindfocus) {
-      const focusAction = () => {
-        bindfocus(
-          getCustomEvent(
-            'focus',
-            evt,
-            {
-              detail: {
-                value: tmpValue.current || '',
-                height: keyboardAvoid?.current?.keyboardHeight
-              },
-              layoutRef
-            },
-            props
-          )
-        )
-        if (keyboardAvoid?.current?.onKeyboardShow) {
-          keyboardAvoid.current.onKeyboardShow = undefined
-        }
-      }
-      if (keyboardAvoid?.current) {
-        // 有 keyboardAvoiding
-        if (keyboardAvoid.current.keyboardHeight) {
-          // iOS: keyboard 获取高度时机 keyboardWillShow 在 input focus 之前，可以立即执行
-          focusAction()
-        } else {
-          // Android,Harmony: keyboard 获取高度时机 keyboardDidShow 在 input focus 之后，需要延迟回调
-          evt.persist()
-          keyboardAvoid.current.onKeyboardShow = focusAction
-        }
-      } else {
-        // 无 keyboardAvoiding，直接执行 focus 回调
-        focusAction()
-      }
-    }
+    setKeyboardAvoidContext()
+    bindfocus && bindfocus(
+      getCustomEvent(
+        'focus',
+        evt,
+        {
+          detail: {
+            value: tmpValue.current || ''
+          },
+          layoutRef
+        },
+        props
+      )
+    )
   }
 
   const onBlur = (evt: NativeSyntheticEvent<TextInputFocusEventData>) => {

package/lib/runtime/components/react/mpx-keyboard-avoiding-view.tsx

@@ -1,9 +1,8 @@
-/* eslint-disable space-before-function-paren */
-import React, { ReactNode, useContext, useEffect, useRef } from 'react'
+import React, { ReactNode, useContext, useEffect } from 'react'
 import { DimensionValue, EmitterSubscription, Keyboard, View, ViewStyle, NativeSyntheticEvent, NativeTouchEvent } from 'react-native'
-import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing, cancelAnimation } from 'react-native-reanimated'
+import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from 'react-native-reanimated'
 import { KeyboardAvoidContext } from './context'
-import { isAndroid, isIOS } from './utils'
+import { isIOS } from './utils'
 
 type KeyboardAvoidViewProps = {
   children?: ReactNode
@@ -19,34 +18,15 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }: Keyboa
   const basic = useSharedValue('auto')
   const keyboardAvoid = useContext(KeyboardAvoidContext)
 
-  // fix: 某些特殊机型下隐藏键盘可能会先触发一次 keyboardWillShow，
-  // 比如机型 iPhone 11 Pro，可能会导致显隐动画冲突
-  // 因此增加状态标记 + cancelAnimation 来优化
-  const isShow = useRef<boolean>(false)
-
   const animatedStyle = useAnimatedStyle(() => ({
-    // translate/position top可能会导致底部渲染区域缺失
-    marginTop: -offset.value,
+    transform: [{ translateY: -offset.value }],
     flexBasis: basic.value as DimensionValue
   }))
 
   const resetKeyboard = () => {
-    if (!isShow.current) {
-      return
-    }
-
-    isShow.current = false
-
     if (keyboardAvoid?.current) {
-      const inputRef = keyboardAvoid.current.ref?.current
-      if (inputRef && inputRef.isFocused()) {
-        // 修复 Android 点击键盘收起按钮时当前 input 没触发失焦的问题
-        inputRef.blur()
-      }
       keyboardAvoid.current = null
     }
-
-    cancelAnimation(offset)
     offset.value = withTiming(0, { duration, easing })
     basic.value = 'auto'
   }
@@ -60,55 +40,51 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }: Keyboa
   useEffect(() => {
     let subscriptions: EmitterSubscription[] = []
 
-    function keybaordAvoding(evt: any) {
-      if (!keyboardAvoid?.current || isShow.current) {
-        return
-      }
-
-      isShow.current = true
-
-      const { endCoordinates } = evt
-      const { ref, cursorSpacing = 0, adjustPosition, onKeyboardShow } = keyboardAvoid.current
-      keyboardAvoid.current.keyboardHeight = endCoordinates.height
-      onKeyboardShow?.()
-      if (adjustPosition) {
-        // 默认沿用旧版本逻辑，在 android 原生关闭键盘避让的情况下应该将该配置设置为 false，走 mpx 的键盘避让逻辑，否则bundle内的所有input都会无法避让键盘
-        const enableNativeKeyboardAvoiding = mpxGlobal?.__mpx?.config?.rnConfig?.enableNativeKeyboardAvoiding ?? true
-        const callback = () => {
-          ref?.current?.measure((x: number, y: number, width: number, height: number, pageX: number, pageY: number) => {
-            function calculateOffset() {
-              // enableNativeKeyboardAvoding 默认开启
-              if (enableNativeKeyboardAvoiding && isAndroid) {
-                const aboveOffset = pageY + height - endCoordinates.screenY
-                const belowOffset = endCoordinates.height - aboveOffset
-                const aboveValue = -aboveOffset >= cursorSpacing ? 0 : aboveOffset + cursorSpacing
-                const belowValue = Math.min(belowOffset, cursorSpacing)
-                return aboveOffset > 0 ? belowValue : aboveValue
-              }
-
+    if (isIOS) {
+      subscriptions = [
+        Keyboard.addListener('keyboardWillShow', (evt: any) => {
+          if (!keyboardAvoid?.current) return
+          const { endCoordinates } = evt
+          const { ref, cursorSpacing = 0 } = keyboardAvoid.current
+          setTimeout(() => {
+            ref?.current?.measure((x: number, y: number, width: number, height: number, pageX: number, pageY: number) => {
               const aboveOffset = offset.value + pageY + height - endCoordinates.screenY
               const aboveValue = -aboveOffset >= cursorSpacing ? 0 : aboveOffset + cursorSpacing
               const belowValue = Math.min(endCoordinates.height, aboveOffset + cursorSpacing)
-              return aboveOffset > 0 ? belowValue : aboveValue
-            }
-
-            cancelAnimation(offset)
-            offset.value = withTiming(calculateOffset(), { duration, easing }, finished => {
+              const value = aboveOffset > 0 ? belowValue : aboveValue
+              offset.value = withTiming(value, { duration, easing }, (finished) => {
+                if (finished) {
+                  // Set flexBasic after animation to trigger re-layout and reset layout information
+                  basic.value = '99.99%'
+                }
+              })
+            })
+          })
+        }),
+        Keyboard.addListener('keyboardWillHide', resetKeyboard)
+      ]
+    } else {
+      subscriptions = [
+        Keyboard.addListener('keyboardDidShow', (evt: any) => {
+          if (!keyboardAvoid?.current) return
+          const { endCoordinates } = evt
+          const { ref, cursorSpacing = 0 } = keyboardAvoid.current
+          ref?.current?.measure((x: number, y: number, width: number, height: number, pageX: number, pageY: number) => {
+            const aboveOffset = pageY + height - endCoordinates.screenY
+            const belowOffset = endCoordinates.height - aboveOffset
+            const aboveValue = -aboveOffset >= cursorSpacing ? 0 : aboveOffset + cursorSpacing
+            const belowValue = Math.min(belowOffset, cursorSpacing)
+            const value = aboveOffset > 0 ? belowValue : aboveValue
+            offset.value = withTiming(value, { duration, easing }, (finished) => {
               if (finished) {
                 // Set flexBasic after animation to trigger re-layout and reset layout information
                 basic.value = '99.99%'
               }
             })
           })
-        }
-        ;(isIOS ? () => setTimeout(callback) : callback)()
-      }
-    }
-
-    if (isIOS) {
-      subscriptions = [Keyboard.addListener('keyboardWillShow', keybaordAvoding), Keyboard.addListener('keyboardWillHide', resetKeyboard)]
-    } else {
-      subscriptions = [Keyboard.addListener('keyboardDidShow', keybaordAvoding), Keyboard.addListener('keyboardDidHide', resetKeyboard)]
+        }),
+        Keyboard.addListener('keyboardDidHide', resetKeyboard)
+      ]
     }
 
     return () => {
@@ -117,8 +93,15 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }: Keyboa
   }, [keyboardAvoid])
 
   return (
-    <View style={style} onTouchEnd={onTouchEnd} onTouchMove={onTouchEnd}>
-      <Animated.View style={[contentContainerStyle, animatedStyle]}>{children}</Animated.View>
+    <View style={style} onTouchEnd={onTouchEnd}>
+      <Animated.View
+        style={[
+          contentContainerStyle,
+          animatedStyle
+        ]}
+      >
+        {children}
+      </Animated.View>
     </View>
   )
 }

package/lib/runtime/components/react/mpx-picker-view/index.tsx

@@ -33,7 +33,6 @@ interface PickerViewProps {
   style?: {
     [key: string]: any
   }
-  'enable-wheel-animation'?: boolean
   'indicator-style'?: Record<string, any>,
   'mask-style'?: Record<string, any>,
   'enable-var'?: boolean
@@ -70,7 +69,6 @@ const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProp
     value = [],
     bindchange,
     style,
-    'enable-wheel-animation': enableWheelAnimation = true,
     'indicator-style': indicatorStyle = {},
     'mask-style': pickerMaskStyle = {},
     'enable-var': enableVar,
@@ -170,7 +168,7 @@ const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProp
         columnData,
         ref: cloneRef,
         columnIndex: index,
-        key: `pick-view-${index}-${columnData.length}`,
+        key: `pick-view-${index}`,
         wrapperStyle: {
           height: normalStyle?.height || DefaultPickerItemH,
           itemHeight: indicatorH || DefaultPickerItemH
@@ -178,8 +176,7 @@ const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProp
         onSelectChange: onSelectChange.bind(null, index),
         initialIndex,
         pickerIndicatorStyle,
-        pickerMaskStyle,
-        enableWheelAnimation
+        pickerMaskStyle
       }
     )
     const realElement = React.cloneElement(child, wrappedProps)

package/lib/runtime/components/react/mpx-picker-view-column/index.tsx

@@ -5,8 +5,7 @@ import { useTransformStyle, splitStyle, splitProps, useLayout, usePrevious, isAn
 import useNodesRef, { HandlerRef } from '../useNodesRef'
 import PickerIndicator from './pickerViewIndicator'
 import PickerMask from './pickerViewMask'
-import MpxPickerViewColumnItem from './pickerViewColumnItem'
-import MpxPickerViewColumnItemLite from './pickerViewColumnItemLite'
+import MpxPickerVIewColumnItem from './pickerViewColumnItem'
 import { PickerViewColumnAnimationContext } from '../mpx-picker-view/pickerVIewContext'
 import { calcHeightOffsets } from './pickerViewFaces'
 
@@ -26,7 +25,6 @@ interface ColumnProps {
   }
   pickerMaskStyle: Record<string, any>
   pickerIndicatorStyle: Record<string, any>
-  enableWheelAnimation?: boolean
 }
 
 const visibleCount = 5
@@ -41,7 +39,6 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
     wrapperStyle,
     pickerMaskStyle,
     pickerIndicatorStyle,
-    enableWheelAnimation = true,
     'enable-var': enableVar,
     'external-var-context': externalVarContext
   } = props
@@ -98,11 +95,6 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
     return [{ paddingVertical: paddingHeight }]
   }, [paddingHeight])
 
-  const initialContentOffsetY = useMemo(
-    () => initialIndex * itemRawH,
-    [initialIndex, itemRawH]
-  )
-
   const getIndex = useCallback((y: number) => {
     const calc = Math.round(y / itemRawH)
     return Math.max(0, Math.min(calc, maxIndex))
@@ -160,6 +152,17 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
     }, isIOS ? 0 : 200)
   }, [itemRawH, maxIndex, initialIndex])
 
+  const onContentSizeChange = useCallback((_w: number, h: number) => {
+    const y = initialIndex * itemRawH
+    if (y <= h) {
+      clearTimerScrollTo()
+      timerScrollTo.current = setTimeout(() => {
+        scrollViewRef.current?.scrollTo({ x: 0, y, animated: false })
+        activeIndex.current = initialIndex
+      }, 0)
+    }
+  }, [itemRawH, initialIndex])
+
   const onItemLayout = useCallback((e: LayoutChangeEvent) => {
     const { height: rawH } = e.nativeEvent.layout
     const roundedH = Math.round(rawH)
@@ -284,8 +287,8 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
 
   const renderInnerchild = () =>
     columnData.map((item: React.ReactElement, index: number) => {
-      return enableWheelAnimation
-        ? (<MpxPickerViewColumnItem
+      return (
+        <MpxPickerVIewColumnItem
           key={index}
           item={item}
           index={index}
@@ -294,16 +297,8 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
           textProps={textProps}
           visibleCount={visibleCount}
           onItemLayout={onItemLayout}
-        />)
-        : (<MpxPickerViewColumnItemLite
-          key={index}
-          item={item}
-          index={index}
-          itemHeight={itemHeight}
-          textStyle={textStyle}
-          textProps={textProps}
-          onItemLayout={onItemLayout}
-        />)
+        />
+      )
     })
 
   const renderScollView = () => {
@@ -325,8 +320,8 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
       onScrollEndDrag,
       onMomentumScrollBegin,
       onMomentumScrollEnd,
-      contentContainerStyle,
-      contentOffset: { x: 0, y: initialContentOffsetY }
+      onContentSizeChange,
+      contentContainerStyle
     }) as React.ComponentProps<typeof Reanimated.ScrollView>
 
     return createElement(
@@ -356,9 +351,9 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
 
   return (
     <View style={[styles.wrapper, normalStyle]}>
-      {renderScollView()}
-      {renderMask()}
-      {renderIndicator()}
+        {renderScollView()}
+        {renderMask()}
+        {renderIndicator()}
     </View>
   )
 })