@mpxjs/webpack-plugin 2.10.15 → 2.10.16-beta.2

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

@@ -0,0 +1,167 @@
+import React, { forwardRef, useRef, useCallback, useContext, useState, useEffect } from 'react'
+import { Camera, useCameraDevice, useCodeScanner, useCameraFormat, useFrameProcessor } from 'react-native-vision-camera'
+import { getCustomEvent } from './getInnerListeners'
+import { RouteContext } from './context'
+
+interface CameraProps {
+  mode?: 'normal' | 'scanCode'
+  resolution?: 'low' | 'medium' | 'high'
+  devicePosition?: 'front' | 'back'
+  flash?: 'auto' | 'on' | 'off'
+  frameSize?: 'small' | 'medium' | 'large'
+  style?: Record<string, any>
+  bindstop?: () => void
+  binderror?: (error: { message: string }) => void
+  bindinitdone?: (result: { type: string, data: string }) => void
+  bindscancode?: (result: { type: string, data: string }) => void
+}
+
+interface CameraRef {
+  setZoom: (zoom: number) => void
+  getTakePhoto: () => (() => Promise<any>) | undefined
+  getStartRecord: () => ((options: any) => void) | undefined
+  getStopRecord: () => (() => void) | undefined
+}
+
+type HandlerRef<T, P> = {
+  // 根据实际的 HandlerRef 类型定义调整
+  current: T | null
+}
+
+const _camera = forwardRef<HandlerRef<Camera, CameraProps>, CameraProps>((props: CameraProps, ref): JSX.Element | null => {
+  const cameraRef = useRef<Camera>(null)
+  const {
+    mode = 'normal',
+    resolution = 'medium',
+    devicePosition = 'back',
+    flash = 'auto',
+    frameSize = 'medium',
+    bindinitdone,
+    bindstop,
+    bindscancode
+  } = props
+
+  const isPhoto = mode === 'normal'
+  const device = useCameraDevice(devicePosition || 'back')
+  const { navigation } = useContext(RouteContext) || {}
+  const [zoomValue, setZoomValue] = useState<number>(1)
+  const [hasPermission, setHasPermission] = useState<boolean | null>(null)
+
+  // 先定义常量，避免在条件判断后使用
+  const maxZoom = device?.maxZoom || 1
+  const RESOLUTION_MAPPING: Record<string, { width: number, height: number }> = {
+    low: { width: 640, height: 480 },
+    medium: { width: 1280, height: 720 },
+    high: { width: 1920, height: 1080 }
+  }
+  const FRAME_SIZE_MAPPING: Record<string, { width: number, height: number }> = {
+    small: { width: 480, height: 360 },
+    medium: { width: 720, height: 540 },
+    large: { width: 1080, height: 810 }
+  }
+
+  // 所有 Hooks 必须在条件判断之前调用
+  const format = useCameraFormat(device, [
+    {
+      photoResolution: RESOLUTION_MAPPING[resolution],
+      videoResolution: FRAME_SIZE_MAPPING[frameSize] || RESOLUTION_MAPPING[resolution]
+    }
+  ])
+
+  const codeScanner = useCodeScanner({
+    codeTypes: ['qr', 'ean-13'],
+    onCodeScanned: (codes) => {
+      const result = codes.map(code => code.value).join(',')
+      bindscancode && bindscancode(getCustomEvent('scancode', {}, {
+        detail: {
+          result: codes.map(code => code.value).join(',')
+        }
+      }))
+    }
+  })
+
+  const onInitialized = useCallback(() => {
+    bindinitdone && bindinitdone(getCustomEvent('initdone', {}, {
+      detail: {
+        maxZoom
+      }
+    }))
+  }, [bindinitdone, maxZoom])
+
+  const onStopped = useCallback(() => {
+    bindstop && bindstop()
+  }, [bindstop])
+
+  // 检查相机权限
+  useEffect(() => {
+    const checkCameraPermission = async () => {
+      try {
+        const cameraPermission = global?.__mpx?.config?.rnConfig?.cameraPermission
+        if (typeof cameraPermission === 'function') {
+          const permissionResult = await cameraPermission()
+          setHasPermission(permissionResult === true)
+        } else {
+          setHasPermission(true)
+        }
+      } catch (error) {
+        setHasPermission(false)
+      }
+    }
+
+    checkCameraPermission()
+  }, [])
+
+  const camera: CameraRef = {
+    setZoom: (zoom: number) => {
+      setZoomValue(zoom)
+    },
+    getTakePhoto: () => {
+      return cameraRef.current?.takePhoto
+    },
+    getStartRecord: () => {
+      return cameraRef.current?.startRecording
+    },
+    getStopRecord: () => {
+      return cameraRef.current?.stopRecording
+    }
+  }
+
+  if (navigation) {
+    navigation.camera = camera
+  }
+
+  // 所有 Hooks 调用完成后再进行条件判断
+  if (hasPermission === null) {
+    return null
+  }
+
+  if (!hasPermission) {
+    return null
+  }
+
+  if (!device) {
+    return null
+  }
+
+  return (
+    <Camera
+      ref={cameraRef}
+      isActive={true}
+      photo={isPhoto}
+      video={true}
+      onInitialized={onInitialized}
+      onStopped={onStopped}
+      device={device}
+      flash={flash}
+      format={format}
+      codeScanner={!isPhoto ? codeScanner : undefined}
+      style={{ flex: 1 }}
+      zoom={zoomValue}
+      {...props}
+    />
+  )
+})
+
+_camera.displayName = 'MpxCamera'
+
+export default _camera

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,9 +93,20 @@ const ModeMap = new Map<Mode, ImageResizeMode | undefined>([
   ...cropMode.map<[Mode, ImageResizeMode]>(mode => [mode, 'stretch'])
 ])
 
-const isNumber = (value: DimensionValue) => typeof value === 'number'
+const isNumber = (value: DimensionValue): value is number => typeof value === 'number'
 
-const relativeCenteredSize = (viewSize: number, imageSize: number) => (viewSize - imageSize) / 2
+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)
+}
 
 function noMeetCalcRule (isSvg: boolean, mode: Mode, viewWidth: number, viewHeight: number, ratio: number) {
   const isMeetSize = viewWidth && viewHeight && ratio
@@ -104,6 +115,17 @@ 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 = '',
@@ -131,8 +153,6 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
     { overflow: 'hidden' }
   )
 
-  const state = useRef<ImageState>({})
-
   const nodeRef = useRef(null)
   useNodesRef(props, ref, nodeRef, {
     defaultStyle
@@ -148,14 +168,18 @@ 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)
-      state.current = {}
+      setViewSize(state.current.viewWidth!, state.current.viewHeight!, state.current.ratio!)
       setLoaded(true)
     }
   }
@@ -186,43 +210,57 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
   const [ratio, setRatio] = useState(0)
   const [loaded, setLoaded] = useState(!isLayoutMode)
 
-  const fixedHeight = useMemo(() => {
-    const fixed = viewWidth * ratio
-    return !fixed ? viewHeight : fixed
-  }, [ratio, viewWidth, viewHeight])
+  const state = useRef<ImageState>({
+    viewWidth,
+    viewHeight
+  })
 
-  const fixedWidth = useMemo(() => {
-    if (!ratio) return viewWidth
-    const fixed = viewHeight / ratio
-    return !fixed ? viewWidth : 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 modeStyle: ImageStyle = useMemo(() => {
     if (noMeetCalcRule(isSvg, mode, viewWidth, viewHeight, ratio)) return {}
     switch (mode) {
-      case 'scaleToFill':
+      case 'scaleToFill': // wx 中 svg 图片的 scaleToFill 模式效果与 aspectFit 一致，不会就行图片缩放，此处保持一致
       case 'aspectFit':
         if (isSvg) {
-          const scale = ratio <= 1
-            ? imageWidth >= viewWidth ? viewWidth / imageWidth : imageWidth / viewWidth
-            : imageHeight >= viewHeight ? viewHeight / imageHeight : imageHeight / viewHeight
+          const scale = getFitScale(imageWidth, imageHeight, viewWidth, viewHeight)
           return {
             transform: [
-              { scale },
-              ratio <= 1 ? { translateY: -(imageHeight * scale - viewHeight) / 2 / scale } : { translateX: -(imageWidth * scale - viewWidth) / 2 / scale }
+              { translateY: relativeCenteredSize(viewHeight, imageHeight * scale) },
+              { translateX: relativeCenteredSize(viewWidth, imageWidth * scale) },
+              { scale }
             ]
           }
         }
         return {}
       case 'aspectFill':
         if (isSvg) {
-          const scale = ratio >= 1
-            ? imageWidth >= viewWidth ? viewWidth / imageWidth : imageWidth / viewWidth
-            : imageHeight >= viewHeight ? viewHeight / imageHeight : imageHeight / viewHeight
+          const scale = getFillScale(imageWidth, imageHeight, viewWidth, viewHeight)
           return {
             transform: [
-              { scale },
-              ratio >= 1 ? { translateY: -(imageHeight * scale - viewHeight) / 2 / scale } : { translateX: -(imageWidth * scale - viewWidth) / 2 / scale }
+              { translateY: relativeCenteredSize(viewHeight, imageHeight * scale) },
+              { translateX: relativeCenteredSize(viewWidth, imageWidth * scale) },
+              { scale }
             ]
           }
         }
@@ -230,9 +268,7 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
       case 'widthFix':
       case 'heightFix':
         if (isSvg) {
-          const scale = ratio >= 1
-            ? imageWidth >= fixedWidth ? fixedWidth / imageWidth : imageWidth / fixedWidth
-            : imageHeight >= fixedHeight ? fixedHeight / imageHeight : imageHeight / fixedHeight
+          const scale = getFitScale(imageWidth, imageHeight, viewWidth, viewHeight)
           return {
             transform: [{ scale }]
           }
@@ -295,13 +331,25 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
       default:
         return {}
     }
-  }, [isSvg, mode, viewWidth, viewHeight, imageWidth, imageHeight, ratio, fixedWidth, fixedHeight])
+  }, [isSvg, mode, viewWidth, viewHeight, imageWidth, imageHeight, ratio])
 
   const onSvgLoad = (evt: LayoutChangeEvent) => {
     const { width, height } = evt.nativeEvent.layout
-    setRatio(!width ? 0 : height / width)
-    setImageWidth(width)
+    state.current.imageHeight = height
     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(
@@ -375,12 +423,11 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
             : isHeightFixMode
               ? state.current.viewHeight
               : state.current.viewWidth && state.current.viewHeight) {
-            state.current.viewWidth && setViewWidth(state.current.viewWidth)
-            state.current.viewHeight && setViewHeight(state.current.viewHeight)
-            setRatio(!width ? 0 : height / width)
+            setRatio(state.current.ratio)
             setImageWidth(width)
             setImageHeight(height)
-            state.current = {}
+            setViewSize(state.current.viewWidth!, state.current.viewHeight!, state.current.ratio!)
+
             setLoaded(true)
           }
         },
@@ -402,8 +449,8 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
           {},
           normalStyle,
           layoutStyle,
-          isHeightFixMode ? { width: fixedWidth } : {},
-          isWidthFixMode ? { height: fixedHeight } : {}
+          isHeightFixMode ? { width: viewWidth } : {},
+          isWidthFixMode ? { height: viewHeight } : {}
         )
       }
     ),

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

@@ -1,6 +1,6 @@
-import React, { ReactNode, useContext, useEffect } from 'react'
+import React, { ReactNode, useContext, useEffect, useRef } from 'react'
 import { DimensionValue, EmitterSubscription, Keyboard, View, ViewStyle, NativeSyntheticEvent, NativeTouchEvent } from 'react-native'
-import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from 'react-native-reanimated'
+import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing, cancelAnimation } from 'react-native-reanimated'
 import { KeyboardAvoidContext } from './context'
 import { isIOS } from './utils'
 
@@ -18,15 +18,28 @@ 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(() => ({
     transform: [{ translateY: -offset.value }],
     flexBasis: basic.value as DimensionValue
   }))
 
   const resetKeyboard = () => {
+    if (!isShow.current) {
+      return
+    }
+
+    isShow.current = false
+
     if (keyboardAvoid?.current) {
       keyboardAvoid.current = null
     }
+
+    cancelAnimation(offset)
     offset.value = withTiming(0, { duration, easing })
     basic.value = 'auto'
   }
@@ -43,15 +56,22 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }: Keyboa
     if (isIOS) {
       subscriptions = [
         Keyboard.addListener('keyboardWillShow', (evt: any) => {
-          if (!keyboardAvoid?.current) return
+          if (!keyboardAvoid?.current || isShow.current) {
+            return
+          }
+
+          isShow.current = true
+
           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)
               const value = aboveOffset > 0 ? belowValue : aboveValue
+              cancelAnimation(offset)
               offset.value = withTiming(value, { duration, easing }, (finished) => {
                 if (finished) {
                   // Set flexBasic after animation to trigger re-layout and reset layout information
@@ -66,15 +86,22 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }: Keyboa
     } else {
       subscriptions = [
         Keyboard.addListener('keyboardDidShow', (evt: any) => {
-          if (!keyboardAvoid?.current) return
+          if (!keyboardAvoid?.current || isShow.current) {
+            return
+          }
+
+          isShow.current = true
+
           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
+            cancelAnimation(offset)
             offset.value = withTiming(value, { duration, easing }, (finished) => {
               if (finished) {
                 // Set flexBasic after animation to trigger re-layout and reset layout information

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

@@ -33,6 +33,7 @@ interface PickerViewProps {
   style?: {
     [key: string]: any
   }
+  'enable-wheel-animation'?: boolean
   'indicator-style'?: Record<string, any>,
   'mask-style'?: Record<string, any>,
   'enable-var'?: boolean
@@ -69,6 +70,7 @@ const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProp
     value = [],
     bindchange,
     style,
+    'enable-wheel-animation': enableWheelAnimation = true,
     'indicator-style': indicatorStyle = {},
     'mask-style': pickerMaskStyle = {},
     'enable-var': enableVar,
@@ -176,7 +178,8 @@ const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProp
         onSelectChange: onSelectChange.bind(null, index),
         initialIndex,
         pickerIndicatorStyle,
-        pickerMaskStyle
+        pickerMaskStyle,
+        enableWheelAnimation
       }
     )
     const realElement = React.cloneElement(child, wrappedProps)

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

@@ -5,7 +5,8 @@ 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 MpxPickerViewColumnItem from './pickerViewColumnItem'
+import MpxPickerViewColumnItemLite from './pickerViewColumnItemLite'
 import { PickerViewColumnAnimationContext } from '../mpx-picker-view/pickerVIewContext'
 import { calcHeightOffsets } from './pickerViewFaces'
 
@@ -25,6 +26,7 @@ interface ColumnProps {
   }
   pickerMaskStyle: Record<string, any>
   pickerIndicatorStyle: Record<string, any>
+  enableWheelAnimation?: boolean
 }
 
 const visibleCount = 5
@@ -39,6 +41,7 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
     wrapperStyle,
     pickerMaskStyle,
     pickerIndicatorStyle,
+    enableWheelAnimation = true,
     'enable-var': enableVar,
     'external-var-context': externalVarContext
   } = props
@@ -287,8 +290,8 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
 
   const renderInnerchild = () =>
     columnData.map((item: React.ReactElement, index: number) => {
-      return (
-        <MpxPickerVIewColumnItem
+      return enableWheelAnimation
+        ? (<MpxPickerViewColumnItem
           key={index}
           item={item}
           index={index}
@@ -297,8 +300,16 @@ 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 = () => {
@@ -351,9 +362,9 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
 
   return (
     <View style={[styles.wrapper, normalStyle]}>
-        {renderScollView()}
-        {renderMask()}
-        {renderIndicator()}
+      {renderScollView()}
+      {renderMask()}
+      {renderIndicator()}
     </View>
   )
 })

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

@@ -1,6 +1,6 @@
-import React, { useEffect } from 'react'
+import React, { useMemo } from 'react'
 import { LayoutChangeEvent } from 'react-native'
-import Reanimated, { Extrapolation, interpolate, useAnimatedStyle, useSharedValue } from 'react-native-reanimated'
+import Reanimated, { Extrapolation, interpolate, useAnimatedStyle } from 'react-native-reanimated'
 import { extendObject } from '../utils'
 import { createFaces } from './pickerViewFaces'
 import { usePickerViewColumnAnimationContext, usePickerViewStyleContext } from '../mpx-picker-view/pickerVIewContext'
@@ -28,20 +28,16 @@ const PickerViewColumnItem: React.FC<PickerColumnItemProps> = ({
 }) => {
   const textStyleFromAncestor = usePickerViewStyleContext()
   const offsetYShared = usePickerViewColumnAnimationContext()
-  const facesShared = useSharedValue(createFaces(itemHeight, visibleCount))
-
-  useEffect(() => {
-    facesShared.value = createFaces(itemHeight, visibleCount)
-  }, [itemHeight])
+  const facesShared = useMemo(() => createFaces(itemHeight, visibleCount), [itemHeight, visibleCount])
 
   const animatedStyles = useAnimatedStyle(() => {
-    const inputRange = facesShared.value.map((f) => itemHeight * (index + f.index))
+    const inputRange = facesShared.map((f) => itemHeight * (index + f.index))
     return {
-      opacity: interpolate(offsetYShared.value, inputRange, facesShared.value.map((x) => x.opacity), Extrapolation.CLAMP),
+      opacity: interpolate(offsetYShared.value, inputRange, facesShared.map((x) => x.opacity), Extrapolation.CLAMP),
       transform: [
-        { translateY: interpolate(offsetYShared.value, inputRange, facesShared.value.map((x) => x.offsetY), Extrapolation.EXTEND) },
-        { rotateX: interpolate(offsetYShared.value, inputRange, facesShared.value.map((x) => x.deg), Extrapolation.CLAMP) + 'deg' },
-        { scale: interpolate(offsetYShared.value, inputRange, facesShared.value.map((x) => x.scale), Extrapolation.EXTEND) }
+        { translateY: interpolate(offsetYShared.value, inputRange, facesShared.map((x) => x.offsetY), Extrapolation.EXTEND) },
+        { rotateX: interpolate(offsetYShared.value, inputRange, facesShared.map((x) => x.deg), Extrapolation.CLAMP) + 'deg' },
+        { scale: interpolate(offsetYShared.value, inputRange, facesShared.map((x) => x.scale), Extrapolation.EXTEND) }
       ]
     }
   })

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

@@ -0,0 +1,55 @@
+import React from 'react'
+import { LayoutChangeEvent, View } from 'react-native'
+import { extendObject } from '../utils'
+import { usePickerViewStyleContext } from '../mpx-picker-view/pickerVIewContext'
+
+interface PickerColumnItemProps {
+  item: React.ReactElement
+  index: number
+  itemHeight: number
+  itemWidth?: number | '100%'
+  textStyle: Record<string, any>
+  textProps?: any
+  onItemLayout?: (e: LayoutChangeEvent) => void
+}
+
+const PickerViewColumnItem: React.FC<PickerColumnItemProps> = ({
+  item,
+  index,
+  itemHeight,
+  itemWidth = '100%',
+  textStyle,
+  textProps,
+  onItemLayout
+}) => {
+  const textStyleFromAncestor = usePickerViewStyleContext()
+  const strKey = `picker-column-item-${index}`
+  const restProps = index === 0 ? { onLayout: onItemLayout } : {}
+  const itemProps = extendObject(
+    {
+      style: extendObject(
+        { height: itemHeight, width: '100%' },
+        textStyleFromAncestor,
+        textStyle,
+        item.props.style
+      )
+    },
+    textProps,
+    restProps
+  )
+  const realItem = React.cloneElement(item, itemProps)
+
+  return (
+    <View
+      key={strKey}
+      style={[
+        { height: itemHeight, width: itemWidth, pointerEvents: 'none' }
+      ]}
+    >
+      {realItem}
+    </View>
+  )
+}
+
+PickerViewColumnItem.displayName = 'MpxPickerViewColumnItem'
+export default PickerViewColumnItem