Merge branch 'fix-drn' of https://github.com/didi/mpx into fix-drn

packages/core/src/platform/patch/getDefaultOptions.ios.js

@@ -380,6 +380,7 @@ function usePageStatus (navigation, pageId) {
   }, [navigation])
 }
 
+const pageConfigStack = []
 export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
   rawOptions = mergeOptions(rawOptions, type, false)
   const components = Object.assign({}, rawOptions.components, currentInject.getComponents())
@@ -505,12 +506,24 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
           },
           headerTintColor: pageConfig.navigationBarTextStyle || 'white'
         })
-        if (__mpx_mode__ === 'android') {
-          ReactNative.StatusBar.setBarStyle(pageConfig.barStyle || 'dark-content')
+
+        const setStatusBar = (config) => {
+          ReactNative.StatusBar.setBarStyle(config.barStyle || 'dark-content')
           ReactNative.StatusBar.setTranslucent(isCustom) // 控制statusbar是否占位
-          const color = isCustom ? 'transparent' : pageConfig.statusBarColor
+          const color = isCustom ? 'transparent' : config.statusBarColor
           color && ReactNative.StatusBar.setBackgroundColor(color)
         }
+        if (__mpx_mode__ === 'android') {
+          pageConfigStack.push(pageConfig)
+          setStatusBar(pageConfig)
+        }
+        return () => {
+          if (__mpx_mode__ === 'android') {
+            pageConfigStack.pop()
+            const config = pageConfigStack[pageConfigStack.length - 1] || {}
+            setStatusBar(config)
+          }
+        };
       }, [])
 
       const rootRef = useRef(null)

packages/webpack-plugin/lib/platform/style/wx/index.js

@@ -128,7 +128,7 @@ module.exports = function getSpec ({ warn, error }) {
       } else if (char === ')') {
         stack--
         if (stack === 0) {
-          val = values.substring(start, i + 1)
+          val = values.substring(start + 1, i)
         }
       }
     }

packages/webpack-plugin/lib/runtime/components/react/getInnerListeners.ts

@@ -289,7 +289,6 @@ const useInnerProps = (
   const eventConfig: { [key: string]: string[] } = {}
   const config = rawConfig || {
     layoutRef: { current: {} },
-    disableTouch: false,
     disableTap: false
   }
   const removeProps = [
@@ -317,11 +316,10 @@ const useInnerProps = (
     }
   }
 
-  if (!rawEventKeys.length || config.disableTouch) {
-    return omit(propsRef.current, removeProps)
-  }
-
   const events = useMemo(() => {
+    if (!rawEventKeys.length) {
+      return {}
+    }
     const transformedEventKeys = rawEventKeys.reduce((acc: string[], key) => {
       if (propsRef.current[key]) {
         return acc.concat(eventConfig[key])

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

@@ -1,8 +1,7 @@
 import React, { forwardRef, useRef, useState, useMemo, useEffect, useCallback } from 'react'
-import { LayoutChangeEvent, NativeScrollEvent, NativeSyntheticEvent, Platform, SafeAreaView, ScrollView, StyleSheet, View } from 'react-native'
+import { LayoutChangeEvent, NativeScrollEvent, NativeSyntheticEvent, SafeAreaView, ScrollView, StyleSheet, View } from 'react-native'
 import Reanimated, { AnimatedRef, 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, { HandlerRef } from './useNodesRef'
 import PickerOverlay from './pickerViewOverlay'
 import PickerMask from './pickerViewMask'
@@ -87,23 +86,23 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
     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])
@@ -114,6 +113,7 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
   }, [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 ||
@@ -133,13 +133,13 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
         y: itemRawH * initialIndex,
         animated: false
       })
-    }, 0)
+    }, isAndroid ? 200 : 0)
     activeIndex.current = initialIndex
   }, [itemRawH, initialIndex])
 
   const onContentSizeChange = (_w: number, h: number) => {
     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 })
@@ -148,9 +148,13 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
   }
 
   const onScrollViewLayout = (e: LayoutChangeEvent) => {
+    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) {
@@ -208,7 +212,12 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
   }
 
   const onScroll = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
-    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
@@ -221,7 +230,8 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
             index: currentId,
             y: currentId * itemRawH
           }
-          vibrateShort({ type: 'selection' })
+          // vibrateShort({ type: 'selection' })
+          pickerVibrate()
         }
       }
     }

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

@@ -122,7 +122,7 @@ const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProp
 
   const onInitialChange = (isInvalid: boolean, value: number[]) => {
     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',
         {},

packages/webpack-plugin/lib/runtime/components/react/useAnimationHooks.ts

@@ -125,7 +125,7 @@ const parseValueFromParentheses = (values: string) => {
     } else if (char === ')') {
       stack--
       if (stack === 0) {
-        val = values.substring(start, i + 1)
+        val = values.substring(start + 1, i)
       }
     }
   }

packages/webpack-plugin/lib/runtime/components/react/utils.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useCallback, useMemo, useRef, ReactNode, ReactElement, isValidElement, useContext, useState, Dispatch, SetStateAction, Children, cloneElement } from 'react'
-import { LayoutChangeEvent, TextStyle, ImageProps, Image } from 'react-native'
+import { LayoutChangeEvent, TextStyle, ImageProps, Image, Platform } from 'react-native'
 import { isObject, isFunction, isNumber, hasOwn, diffAndCloneA, error, warn, getFocusedNavigation } from '@mpxjs/utils'
 import { VarContext, ScrollViewContext } from './context'
 import { ExpressionParser, parseFunc, ReplaceSource } from './parser'
@@ -20,6 +20,9 @@ export const HIDDEN_STYLE = {
   opacity: 0
 }
 
+export const isIOS = Platform.OS === 'ios'
+export const isAndroid = Platform.OS === 'android'
+
 const varDecRegExp = /^--.*/
 const varUseRegExp = /var\(/
 const calcUseRegExp = /calc\(/