Merge pull request #1760 from wangshunnn/fix-picker-view-1129

Feat rn picker-view

packages/webpack-plugin/lib/platform/template/wx/component-config/picker-view.js

@@ -6,9 +6,7 @@ module.exports = function ({ print }) {
   const ttPropLog = print({ platform: 'bytedance', tag: TAG_NAME, isError: false })
   const ttEventLog = print({ platform: 'bytedance', tag: TAG_NAME, isError: false, type: 'event' })
   const jdEventLog = print({ platform: 'jd', tag: TAG_NAME, isError: false, type: 'event' })
-  const iosPropLog = print({ platform: 'ios', tag: TAG_NAME, isError: false })
   const iosEventLog = print({ platform: 'ios', tag: TAG_NAME, isError: false, type: 'event' })
-  const androidPropLog = print({ platform: 'android', tag: TAG_NAME, isError: false })
   const androidEventLog = print({ platform: 'android', tag: TAG_NAME, isError: false, type: 'event' })
 
   return {
@@ -28,9 +26,7 @@ module.exports = function ({ print }) {
     props: [
       {
         test: /^(indicator-class|mask-class)$/,
-        tt: ttPropLog,
-        ios: iosPropLog,
-        android: androidPropLog
+        tt: ttPropLog
       }
     ],
     event: [

packages/webpack-plugin/lib/runtime/components/react/mpx-picker-view-column-item.tsx

@@ -0,0 +1,76 @@
+import React, { useEffect } from 'react'
+import { LayoutChangeEvent } from 'react-native'
+import Reanimated, { Extrapolation, interpolate, useAnimatedStyle, useSharedValue } from 'react-native-reanimated'
+import { wrapChildren, extendObject } from './utils'
+import { createFaces } from './pickerFaces'
+import { usePickerViewColumnAnimationContext, usePickerViewStyleContext } from './pickerVIewContext'
+
+interface PickerColumnItemProps {
+  item: React.ReactElement
+  index: number
+  itemHeight: number
+  itemWidth?: number | '100%'
+  textStyle: Record<string, any>
+  visibleCount: number
+  textProps?: any
+  onItemLayout?: (e: LayoutChangeEvent) => void
+}
+
+const PickerViewColumnItem: React.FC<PickerColumnItemProps> = ({
+  item,
+  index,
+  itemHeight,
+  itemWidth = '100%',
+  textStyle,
+  textProps,
+  visibleCount,
+  onItemLayout
+}) => {
+  const textStyleFromAncestor = usePickerViewStyleContext()
+  const offsetYShared = usePickerViewColumnAnimationContext()
+  const facesShared = useSharedValue(createFaces(itemHeight, visibleCount))
+
+  useEffect(() => {
+    facesShared.value = createFaces(itemHeight, visibleCount)
+  }, [itemHeight])
+
+  const animatedStyles = useAnimatedStyle(() => {
+    const inputRange = facesShared.value.map((f) => itemHeight * (index + f.index))
+    return {
+      opacity: interpolate(offsetYShared.value, inputRange, facesShared.value.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) }
+      ]
+    }
+  })
+
+  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 (
+    <Reanimated.View
+      key={strKey}
+      style={[{ height: itemHeight, width: itemWidth }, animatedStyles]}
+    >
+      {realItem}
+    </Reanimated.View>
+  )
+}
+
+PickerViewColumnItem.displayName = 'MpxPickerViewColumnItem'
+export default PickerViewColumnItem