@mpxjs/webpack-plugin 2.9.69 → 2.9.70-alpha.1

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

@@ -17,7 +17,7 @@
  * ✔ cursor-color
  * ✔ selection-start
  * ✔ selection-end
- * ✘ adjust-position
+ * ✔ adjust-position
  * ✘ hold-keyboard
  * ✘ safe-password-cert-path
  * ✘ safe-password-length
@@ -55,10 +55,10 @@ import {
   TextInputSubmitEditingEventData
 } from 'react-native'
 import { warn } from '@mpxjs/utils'
-import { parseInlineStyle, useUpdateEffect, useTransformStyle, useLayout } from './utils'
+import { parseInlineStyle, useUpdateEffect, useTransformStyle, useLayout, extendObject } from './utils'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
-import { FormContext, FormFieldValue } from './context'
+import { FormContext, FormFieldValue, KeyboardAvoidContext } from './context'
 
 type InputStyle = Omit<
   TextStyle & ViewStyle & Pick<FlexStyle, 'minHeight'>,
@@ -98,6 +98,7 @@ export interface InputProps {
   'parent-font-size'?: number
   'parent-width'?: number
   'parent-height'?: number
+  'adjust-position': boolean,
   bindinput?: (evt: NativeSyntheticEvent<TextInputTextInputEventData> | unknown) => void
   bindfocus?: (evt: NativeSyntheticEvent<TextInputFocusEventData> | unknown) => void
   bindblur?: (evt: NativeSyntheticEvent<TextInputFocusEventData> | unknown) => void
@@ -106,6 +107,7 @@ export interface InputProps {
 }
 
 export interface PrivateInputProps {
+  allowFontScaling?: boolean
   multiline?: boolean
   'auto-height'?: boolean
   bindlinechange?: (evt: NativeSyntheticEvent<TextInputContentSizeChangeEventData> | unknown) => void
@@ -127,6 +129,7 @@ const keyboardTypeMap: Record<Type, string> = {
 const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps>((props: FinalInputProps, ref): JSX.Element => {
   const {
     style = {},
+    allowFontScaling = false,
     type = 'text',
     value,
     password,
@@ -146,6 +149,7 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
     'parent-font-size': parentFontSize,
     'parent-width': parentWidth,
     'parent-height': parentHeight,
+    'adjust-position': adjustPosition = true,
     bindinput,
     bindfocus,
     bindblur,
@@ -159,6 +163,8 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
 
   const formContext = useContext(FormContext)
 
+  const setKeyboardAvoidEnabled = useContext(KeyboardAvoidContext)
+
   let formValuesMap: Map<string, FormFieldValue> | undefined
 
   if (formContext) {
@@ -170,20 +176,20 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
   const placeholderTextColor = parseInlineStyle(placeholderStyle)?.color
   const textAlignVertical = multiline ? 'top' : 'auto'
 
-  const tmpValue = useRef<string>()
+  const tmpValue = useRef<string | undefined>(defaultValue)
   const cursorIndex = useRef<number>(0)
   const lineCount = useRef<number>(0)
 
   const [inputValue, setInputValue] = useState(defaultValue)
   const [contentHeight, setContentHeight] = useState(0)
 
-  const styleObj = {
-    padding: 0,
-    ...style,
-    ...multiline && autoHeight && {
-      height: Math.max((style as any)?.minHeight || 35, contentHeight)
-    }
-  }
+  const styleObj = extendObject(
+    { padding: 0, backgroundColor: '#fff' },
+    style,
+    multiline && autoHeight
+      ? { height: Math.max((style as any)?.minHeight || 35, contentHeight) }
+      : {}
+  )
 
   const {
     hasSelfPercent,
@@ -193,7 +199,9 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
   } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
 
   const nodeRef = useRef(null)
-  useNodesRef(props, ref, nodeRef)
+  useNodesRef(props, ref, nodeRef, {
+    style: normalStyle
+  })
 
   const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef })
 
@@ -378,6 +386,10 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
     }
   }, [])
 
+  useEffect(() => {
+    setKeyboardAvoidEnabled?.(adjustPosition)
+  }, [adjustPosition])
+
   useUpdateEffect(() => {
     if (!nodeRef?.current) {
       return
@@ -387,28 +399,44 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
       : (nodeRef.current as TextInput)?.blur()
   }, [focus])
 
-  const composeStyle = { ...normalStyle, ...layoutStyle }
-
-  const innerProps = useInnerProps(props, {
-    ref: nodeRef,
-    style: {
-      padding: 0,
-      ...composeStyle,
-      ...multiline && autoHeight && {
-        height: Math.max((composeStyle as any)?.minHeight || 35, contentHeight)
+  const innerProps = useInnerProps(
+    props,
+    extendObject(
+      {
+        ref: nodeRef,
+        style: extendObject({}, normalStyle, layoutStyle),
+        allowFontScaling
+      },
+      layoutProps,
+      {
+        onFocus: bindfocus && onInputFocus,
+        onBlur: bindblur && onInputBlur,
+        onKeyPress: bindconfirm && onKeyPress,
+        onSubmitEditing: bindconfirm && multiline && onSubmitEditing,
+        onSelectionChange: bindselectionchange && onSelectionChange
       }
-    },
-    ...layoutProps,
-    onFocus: bindfocus && onInputFocus,
-    onBlur: bindblur && onInputBlur,
-    onKeyPress: bindconfirm && onKeyPress,
-    onSubmitEditing: bindconfirm && multiline && onSubmitEditing,
-    onSelectionChange: bindselectionchange && onSelectionChange
-  },
-  [],
-  {
-    layoutRef
-  })
+    ),
+    [
+      'type',
+      'keyboardType',
+      'password',
+      'placeholder-style',
+      'disabled',
+      'maxlength',
+      'auto-focus',
+      'focus',
+      'confirm-type',
+      'confirm-hold',
+      'cursor',
+      'cursor-color',
+      'selection-start',
+      'selection-end',
+      'multiline'
+    ],
+    {
+      layoutRef
+    }
+  )
 
   return (
     <TextInput

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

@@ -6,7 +6,7 @@ import { View, ViewStyle, NativeSyntheticEvent } from 'react-native'
 import { noop, warn } from '@mpxjs/utils'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
-import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren } from './utils'
+import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject } from './utils'
 import { LabelContext, LabelContextValue } from './context'
 
 export interface LabelProps {
@@ -42,10 +42,7 @@ const Label = forwardRef<HandlerRef<View, LabelProps>, LabelProps>(
       flexDirection: 'row'
     }
 
-    const styleObj = {
-      ...defaultStyle,
-      ...style
-    }
+    const styleObj = extendObject({}, defaultStyle, style)
 
     const {
       hasSelfPercent,
@@ -57,11 +54,11 @@ const Label = forwardRef<HandlerRef<View, LabelProps>, LabelProps>(
     } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
 
     const nodeRef = useRef(null)
-    useNodesRef(props, ref, nodeRef, { defaultStyle })
+    useNodesRef(props, ref, nodeRef, { style: normalStyle })
 
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef })
 
-    const { textStyle, backgroundStyle, innerStyle } = splitStyle(normalStyle)
+    const { textStyle, backgroundStyle, innerStyle = {} } = splitStyle(normalStyle)
 
     if (backgroundStyle) {
       warn('Label does not support background image-related styles!')
@@ -79,12 +76,16 @@ const Label = forwardRef<HandlerRef<View, LabelProps>, LabelProps>(
 
     const innerProps = useInnerProps(
       props,
-      {
-        ref: nodeRef,
-        style: { ...innerStyle, ...layoutStyle },
-        ...layoutProps,
-        bindtap: onTap
-      },
+      extendObject(
+        {
+          ref: nodeRef,
+          style: extendObject({}, innerStyle, layoutStyle)
+        },
+        layoutProps,
+        {
+          bindtap: onTap
+        }
+      ),
       [],
       {
         layoutRef

package/lib/runtime/components/react/mpx-movable-area.tsx

@@ -7,7 +7,7 @@ import { JSX, forwardRef, ReactNode, useRef, useMemo } from 'react'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import useInnerProps from './getInnerListeners'
 import { MovableAreaContext } from './context'
-import { useTransformStyle, wrapChildren, useLayout } from './utils'
+import { useTransformStyle, wrapChildren, useLayout, extendObject } from './utils'
 
 interface MovableAreaProps {
   style?: Record<string, any>;
@@ -35,7 +35,9 @@ const _MovableArea = forwardRef<HandlerRef<View, MovableAreaProps>, MovableAreaP
   } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
 
   const movableViewRef = useRef(null)
-  useNodesRef(props, ref, movableViewRef)
+  useNodesRef(props, ref, movableViewRef, {
+    style: normalStyle
+  })
 
   const contextValue = useMemo(() => ({
     height: normalStyle.height || 10,
@@ -44,11 +46,10 @@ const _MovableArea = forwardRef<HandlerRef<View, MovableAreaProps>, MovableAreaP
 
   const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: movableViewRef })
 
-  const innerProps = useInnerProps(props, {
-    style: { height: contextValue.height, width: contextValue.width, overflow: 'hidden', ...normalStyle, ...layoutStyle },
-    ref: movableViewRef,
-    ...layoutProps
-  }, [], { layoutRef })
+  const innerProps = useInnerProps(props, extendObject({
+    style: extendObject({ height: contextValue.height, width: contextValue.width, overflow: 'hidden' }, normalStyle, layoutStyle),
+    ref: movableViewRef
+  }, layoutProps), [], { layoutRef })
 
   return (
     <MovableAreaContext.Provider value={contextValue}>

package/lib/runtime/components/react/mpx-movable-view.tsx

@@ -148,7 +148,7 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
   const nodeRef = useRef<View>(null)
 
   useNodesRef(props, ref, nodeRef, {
-    defaultStyle: styles.container,
+    style: normalStyle,
     gestureRef: movableGestureRef
   })
 

package/lib/runtime/components/react/mpx-picker/date.tsx

@@ -27,12 +27,14 @@ function dateToString (date: Date, fields: 'day' | 'month' | 'year' = 'day'): st
 }
 
 const _DatePicker = forwardRef<HandlerRef<View, DateProps>, DateProps>((props: DateProps, ref): React.JSX.Element => {
-  const { children, start = '1970-01-01', end = '2999-01-01', value, bindchange, bindcancel, disabled, fields } = props
+  const { children, start = '1970-01-01', end = '2999-01-01', value, bindchange, bindcancel, disabled, fields, style } = props
   const [datevalue, setDateValue] = useState(value)
   // 存储layout布局信息
   const layoutRef = useRef({})
   const viewRef = useRef<View>(null)
-  useNodesRef<View, DateProps>(props, ref, viewRef, {
+  const nodeRef = useRef<View>(null)
+  useNodesRef<View, DateProps>(props, ref, nodeRef, {
+    style
   })
 
   useEffect(() => {
@@ -58,6 +60,7 @@ const _DatePicker = forwardRef<HandlerRef<View, DateProps>, DateProps>((props: D
   }
 
   const dateProps = {
+    ref: nodeRef,
     precision: fields,
     value: formatTimeStr(datevalue),
     minDate: formatTimeStr(start),

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

@@ -32,10 +32,11 @@ import { FormContext, FormFieldValue } from '../context'
  */
 
 const _Picker = forwardRef<HandlerRef<View, PickerProps>, PickerProps>((props: PickerProps, ref): React.JSX.Element => {
-  const { mode = 'selector', value, bindcancel, bindchange, children, bindcolumnchange } = props
+  const { mode = 'selector', value, bindcancel, bindchange, children, bindcolumnchange, style } = props
   const innerLayout = useRef({})
   const nodeRef = useRef(null)
   useNodesRef<View, PickerProps>(props, ref, nodeRef, {
+    style
   })
   const innerProps = useInnerProps(props, {
     ref: nodeRef
@@ -92,7 +93,7 @@ const _Picker = forwardRef<HandlerRef<View, PickerProps>, PickerProps>((props: P
     bindcolumnchange && bindcolumnchange(eventData)
   }
   const commonProps = {
-    ...{ innerProps },
+    ...innerProps,
     mode,
     children,
     bindchange: onChange,

package/lib/runtime/components/react/mpx-picker/multiSelector.tsx

@@ -80,7 +80,7 @@ function getColumnIndexByValue (range: any[] = [], column: number, value: any[]
 }
 
 const _MultiSelectorPicker = forwardRef<HandlerRef<View, MultiSelectorProps>, MultiSelectorProps>((props: MultiSelectorProps, ref): React.JSX.Element => {
-  const { range, value, disabled, bindchange, bindcancel, children, bindcolumnchange } = props
+  const { range, value, disabled, bindchange, bindcancel, children, bindcolumnchange, style } = props
   const formatRange = formatRangeFun(range, props['range-key'])
   const initValue = getInnerValueByIndex(formatRange, value)
   // 选中的索引值
@@ -90,7 +90,9 @@ const _MultiSelectorPicker = forwardRef<HandlerRef<View, MultiSelectorProps>, Mu
   // 存储layout布局信息
   const layoutRef = useRef({})
   const viewRef = useRef<View>(null)
-  useNodesRef<View, MultiSelectorProps>(props, ref, viewRef, {
+  const nodeRef = useRef<View>(null)
+  useNodesRef<View, MultiSelectorProps>(props, ref, nodeRef, {
+    style
   })
 
   useEffect(() => {
@@ -126,6 +128,7 @@ const _MultiSelectorPicker = forwardRef<HandlerRef<View, MultiSelectorProps>, Mu
   }
 
   const antPickerProps = {
+    ref: nodeRef,
     data,
     value: selected,
     cols: range.length,

package/lib/runtime/components/react/mpx-picker/region.tsx

@@ -38,14 +38,16 @@ function formateRegionData (clObj: RegionObj[] = [], customItem?: string, depth
 }
 
 const _RegionPicker = forwardRef<HandlerRef<View, RegionProps>, RegionProps>((props: RegionProps, ref): React.JSX.Element => {
-  const { children, value, bindchange, bindcancel, disabled } = props
+  const { children, value, bindchange, bindcancel, disabled, style } = props
   const formatRegionData = formateRegionData(regionData, props['custom-item'])
 
   const [regionvalue, setRegionValue] = useState(value)
   // 存储layout布局信息
   const layoutRef = useRef({})
   const viewRef = useRef<View>(null)
-  useNodesRef<View, RegionProps>(props, ref, viewRef, {
+  const nodeRef = useRef(null)
+  useNodesRef<View, RegionProps>(props, ref, nodeRef, {
+    style
   })
 
   const onChange = (value: string[]): void => {
@@ -83,6 +85,7 @@ const _RegionPicker = forwardRef<HandlerRef<View, RegionProps>, RegionProps>((pr
   }
 
   const regionProps = {
+    ref: nodeRef,
     data: formatRegionData,
     value: regionvalue,
     onChange,

package/lib/runtime/components/react/mpx-picker/selector.tsx

@@ -22,7 +22,7 @@ const formatRangeFun = (range: Array<RangeItemType>, rangeKey = ''): any => {
 }
 
 const _SelectorPicker = forwardRef<HandlerRef<View, SelectorProps>, SelectorProps>((props: SelectorProps, ref): React.JSX.Element => {
-  const { range, children, value, disabled, bindchange, bindcancel } = props
+  const { range, children, value, disabled, bindchange, bindcancel, style } = props
   // 格式化数据为Array<*>
   const formatRange: PickerColumn = formatRangeFun(range, props['range-key'])
   // 选中的索引值
@@ -32,7 +32,9 @@ const _SelectorPicker = forwardRef<HandlerRef<View, SelectorProps>, SelectorProp
   // 存储layout布局信息
   const layoutRef = useRef({})
   const viewRef = useRef<View>(null)
-  useNodesRef<View, SelectorProps>(props, ref, viewRef, {
+  const nodeRef = useRef(null)
+  useNodesRef<View, SelectorProps>(props, ref, nodeRef, {
+    style
   })
 
   useEffect(() => {
@@ -62,6 +64,7 @@ const _SelectorPicker = forwardRef<HandlerRef<View, SelectorProps>, SelectorProp
   }
 
   const antPickerProps = {
+    ref: nodeRef,
     data,
     value: [selected],
     cols: 1,

package/lib/runtime/components/react/mpx-picker/time.tsx

@@ -1,5 +1,5 @@
 import { View, Text, Modal, TouchableWithoutFeedback } from 'react-native'
-import { PickerView } from '@ant-design/react-native'
+import { PickerView, Portal } from '@ant-design/react-native'
 import React, { forwardRef, useState, useRef, useEffect } from 'react'
 import useNodesRef, { HandlerRef } from '../useNodesRef' // 引入辅助函数
 import { TimeProps } from './type'
@@ -13,8 +13,8 @@ const styles: { [key: string]: Object } = {
   showModal: {
     backgroundColor: 'black',
     opacity: 0.5,
-    position: 'absolute',
-    width: '100%'
+    width: '100%',
+    height: '100%'
   },
   hideModal: {
     opacity: 1,
@@ -125,7 +125,7 @@ function checkSelectedIsValid (strStart: string, strEnd: string, selected: numbe
 // start="02:10" end = 23:01
 
 const _TimePicker = forwardRef<HandlerRef<View, TimeProps>, TimeProps>((props: TimeProps, ref): React.JSX.Element => {
-  const { children, start, end, value, bindchange, bindcancel, disabled } = props
+  const { children, start, end, value, bindchange, bindcancel, style } = props
   const defaultProps = {
     start: '00:10',
     end: '23:59'
@@ -135,11 +135,11 @@ const _TimePicker = forwardRef<HandlerRef<View, TimeProps>, TimeProps>((props: T
   // 存储layout布局信息
   const layoutRef = useRef({})
   const viewRef = useRef<View>(null)
-  useNodesRef<View, TimeProps>(props, ref, viewRef, {})
+  const nodeRef = useRef<View>(null)
+  useNodesRef<View, TimeProps>(props, ref, nodeRef, { style })
   // 存储modal的布局信息
   const modalLayoutRef = useRef({})
   const modalRef = useRef<View>(null)
-  useNodesRef<View, TimeProps>(props, ref, modalRef, {})
   const [visible, setVisible] = useState(false)
   const columnData = generateColumns()
   const [data, setData] = useState(columnData)
@@ -188,12 +188,6 @@ const _TimePicker = forwardRef<HandlerRef<View, TimeProps>, TimeProps>((props: T
     } else {
       // [9, 13]
       setTimeValue(date)
-      const strDate = formatStr(date)
-      bindchange && bindchange({
-        detail: {
-          value: strDate
-        }
-      })
     }
   }
 
@@ -213,6 +207,7 @@ const _TimePicker = forwardRef<HandlerRef<View, TimeProps>, TimeProps>((props: T
 
   const renderModalChildren = () => {
     const pickerProps = {
+      ref: nodeRef,
       data,
       value: timevalue,
       defaultValue: timevalue,
@@ -249,12 +244,11 @@ const _TimePicker = forwardRef<HandlerRef<View, TimeProps>, TimeProps>((props: T
       </TouchableWithoutFeedback>
     </View>
   }
-  const strStyle = visible ? styles.showModal : styles.hideModal
-  const mheight = Math.floor(offsetTop)
 
   // Animated.View
   return (<>
-    <View style={{ ...strStyle, height: visible ? mheight : 0, bottom: 0 }}>
+    <Portal>
+      <View style={visible ? styles.showModal : styles.hideModal}>
       <Modal
         animationType="slide"
         transparent={true}
@@ -263,6 +257,7 @@ const _TimePicker = forwardRef<HandlerRef<View, TimeProps>, TimeProps>((props: T
         {renderModalChildren()}
       </Modal>
     </View>
+    </Portal>
     {renderChildren()}
   </>)
 })

package/lib/runtime/components/react/mpx-picker/type.ts

@@ -3,87 +3,92 @@ import { PickerValue } from '@ant-design/react-native'
 
 export type Obj = Record<string, any>
 export type SelectorProps = {
-  mode: string,
+  mode: string
   // 表示选择了 range 中的第几个（下标从 0 开始）
   value: PickerValue
-  disabled?: boolean,
-  children: ReactNode,
-  bindcancel?: Function,
-  bindchange: Function,
+  disabled?: boolean
+  children: ReactNode
+  bindcancel?: Function
+  bindchange: Function
   // mode 为 selector 或 multiSelector 时，range 有效
-  range: Array<number|string|Obj>,
+  range: Array<number|string|Obj>
   // 当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器《显示内容》 对象中的属性
-  'range-key': string,
+  'range-key': string
   getInnerLayout: Function
+  style?: Record<string, any>
   // bindcolumnchange?: Function
 }
 
 export type MultiSelectorProps = {
-  mode: string,
+  mode: string
   // 表示选择了 range 中的第几个（下标从 0 开始）
-  value: Array<number>,
-  disabled?: boolean,
-  children: ReactNode,
-  bindcancel?: Function,
-  bindchange: Function,
-  bindcolumnchange?: Function,
+  value: Array<number>
+  disabled?: boolean
+  children: ReactNode
+  bindcancel?: Function
+  bindchange: Function
+  bindcolumnchange?: Function
   // mode 为 selector 或 multiSelector 时，range 有效
-  range: Array<Array<any>>,
+  range: Array<Array<any>>
   // 当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器《显示内容》 对象中的属性
-  'range-key': string,
+  'range-key': string
   getInnerLayout: Function
+  style?: Record<string, any>
 }
 
 export type TimeProps = {
-  mode: string,
+  mode: string
   // 表示选择了 range 中的第几个（下标从 0 开始）
-  value: string,
-  disabled?: boolean,
-  children: ReactNode,
-  bindcancel?: Function,
-  bindchange: Function,
-  start: string,
-  end: string,
+  value: string
+  disabled?: boolean
+  children: ReactNode
+  bindcancel?: Function
+  bindchange: Function
+  start: string
+  end: string
   getInnerLayout: Function
+  style?: Record<string, any>
 }
 
 export type DateProps = {
-  mode: string,
+  mode: string
   // 表示选择了 range 中的第几个（下标从 0 开始）
-  value: string,
-  fields?: 'day' | 'month' | 'year',
-  disabled?: boolean,
-  children: ReactNode,
-  bindcancel?: Function,
-  bindchange: Function,
-  start: string,
-  end: string,
+  value: string
+  fields?: 'day' | 'month' | 'year'
+  disabled?: boolean
+  children: ReactNode
+  bindcancel?: Function
+  bindchange: Function
+  start: string
+  end: string
   getInnerLayout: Function
+  style?: Record<string, any>
 }
 
 export type RegionProps = {
-  mode: string,
+  mode: string
   // 表示选择了 range 中的第几个（下标从 0 开始）
-  value: Array<string>,
+  value: Array<string>
   level: 'province' | 'city' | 'region' | 'sub-district'
-  'custom-item'?: string,
-  disabled?: boolean,
-  children: ReactNode,
-  bindcancel?: Function,
-  bindchange: Function,
+  'custom-item'?: string
+  disabled?: boolean
+  children: ReactNode
+  bindcancel?: Function
+  bindchange: Function
   getInnerLayout: Function
+  style?: Record<string, any>
 }
 
 export type RegionObj = {
-  value: string,
+  value: string
   code: string
   postcode?: string
   children?: RegionObj[]
 }
 
 export type PickerData = {
-  value: string,
-  label: string,
+  value: string
+  label: string
   children?: Array<Object>
 }
 

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

@@ -57,7 +57,10 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
   const { textStyle } = splitStyle(normalStyle)
   const { textProps } = splitProps(props)
   const scrollViewRef = useRef<ScrollView>(null)
-  useNodesRef(props, ref, scrollViewRef, {})
+
+  useNodesRef(props, ref, scrollViewRef, {
+    style: normalStyle
+  })
 
   const { height: pickerH, itemHeight = DefaultPickerItemH } = wrapperStyle
   const [itemRawH, setItemRawH] = useState(0) // 单个选项真实渲染高度

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

@@ -90,7 +90,11 @@ const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProp
     setWidth,
     setHeight
   } = useTransformStyle(style, { enableVar, externalVarContext })
-  useNodesRef<View, PickerViewProps>(props, ref, nodeRef, {})
+
+  useNodesRef<View, PickerViewProps>(props, ref, nodeRef, {
+    style: normalStyle
+  })
+
   const {
     // 存储layout布局信息
     layoutRef,
@@ -134,6 +138,7 @@ const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProp
     extendObject({
       ref: nodeRef,
       style: extendObject(
+        {},
         normalStyle,
         layoutStyle,
         {
@@ -151,6 +156,7 @@ const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProp
     const extraProps = {}
     const childProps = child?.props || {}
     const wrappedProps = extendObject(
+      {},
       childProps,
       {
         columnData,