From 66364438eae30ade22b39aed27ac24280478ef82 Mon Sep 17 00:00:00 2001 From: wangshunnn Date: Mon, 23 Dec 2024 17:30:37 +0800 Subject: [PATCH] fix: Android config --- .../react/mpx-picker-view-column.tsx | 24 ++++++++++++------- .../lib/runtime/components/react/utils.tsx | 5 +++- 2 files changed, 20 insertions(+), 9 deletions(-) diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-picker-view-column.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-picker-view-column.tsx index 85cb594ce..75cdf51a6 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-picker-view-column.tsx +++ b/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,8 +86,6 @@ const _PickerViewColumn = forwardRef, nodeRef: scrollViewRef }) - console.log('[mpx-picker-view-column], render ---> columnIndex=', columnIndex, 'initialIndex=', initialIndex, 'columnData=', columnData.length) - // const initialOffset = useMemo(() => ({ // x: 0, // y: itemRawH * initialIndex @@ -114,6 +111,7 @@ const _PickerViewColumn = forwardRef, }, [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 || @@ -132,7 +130,7 @@ const _PickerViewColumn = forwardRef, y: itemRawH * initialIndex, animated: false }) - }, 0) + }, isAndroid ? 200 : 0) activeIndex.current = initialIndex }, [itemRawH, initialIndex]) @@ -146,6 +144,10 @@ const _PickerViewColumn = forwardRef, } 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) if (widthInt !== scrollViewWidth) { @@ -205,7 +207,12 @@ const _PickerViewColumn = forwardRef, } const onScroll = (e: NativeSyntheticEvent) => { - 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 @@ -218,7 +225,8 @@ const _PickerViewColumn = forwardRef, index: currentId, y: currentId * itemRawH } - vibrateShort({ type: 'selection' }) + // vibrateShort({ type: 'selection' }) + pickerVibrate() } } } diff --git a/packages/webpack-plugin/lib/runtime/components/react/utils.tsx b/packages/webpack-plugin/lib/runtime/components/react/utils.tsx index a00bb771e..1e1b48fe4 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/utils.tsx +++ b/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 } from './context' import { ExpressionParser, parseFunc, ReplaceSource } from './parser' @@ -18,6 +18,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\(/