@mpxjs/webpack-plugin 2.10.14-beta.1 → 2.10.14-beta.11

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

@@ -1,8 +1,9 @@
-import React, { ReactNode, useContext, useEffect } from 'react'
+/* eslint-disable space-before-function-paren */
+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'
+import { isAndroid, isIOS } from './utils'
 
 type KeyboardAvoidViewProps = {
   children?: ReactNode
@@ -18,15 +19,38 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }: Keyboa
   const basic = useSharedValue('auto')
   const keyboardAvoid = useContext(KeyboardAvoidContext)
 
+  // fix: 某些特殊机型下隐藏键盘可能会先触发一次 keyboardWillShow，
+  // 比如机型 iPhone 11 Pro，可能会导致显隐动画冲突
+  // 因此增加状态标记 + clearTimeout + cancelAnimation 来优化
+  const isShow = useRef<boolean>(false)
+  const timerRef = useRef<NodeJS.Timeout | null>(null)
+
   const animatedStyle = useAnimatedStyle(() => ({
+    // translate/position top可能会导致底部渲染区域缺失(需要 android 配置聚焦时禁用高度缩小)，margin-top 会导致 portal 的定位失效，无法顶起 portal
     transform: [{ translateY: -offset.value }],
     flexBasis: basic.value as DimensionValue
   }))
 
   const resetKeyboard = () => {
+    if (!isShow.current) {
+      return
+    }
+
+    isShow.current = false
+    timerRef.current && clearTimeout(timerRef.current)
+
     if (keyboardAvoid?.current) {
-      keyboardAvoid.current = null
+      const inputRef = keyboardAvoid.current.ref?.current
+      if (inputRef && inputRef.isFocused()) {
+        // 修复 Android 点击键盘收起按钮时当前 input 没触发失焦的问题
+        inputRef.blur()
+      }
+      if (!keyboardAvoid.current.onKeyboardShow) {
+        keyboardAvoid.current = null
+      }
     }
+
+    cancelAnimation(offset)
     offset.value = withTiming(0, { duration, easing })
     basic.value = 'auto'
   }
@@ -40,68 +64,75 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }: Keyboa
   useEffect(() => {
     let subscriptions: EmitterSubscription[] = []
 
-    if (isIOS) {
-      subscriptions = [
-        Keyboard.addListener('keyboardWillShow', (evt: any) => {
-          if (!keyboardAvoid?.current) return
-          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) => {
+    function keybaordAvoding(evt: any, ios = false) {
+      if (!keyboardAvoid?.current || isShow.current) {
+        return
+      }
+
+      isShow.current = true
+
+      if (ios) {
+        timerRef.current && clearTimeout(timerRef.current)
+      }
+
+      const { endCoordinates } = evt
+      const { ref, cursorSpacing = 0, adjustPosition, onKeyboardShow } = keyboardAvoid.current
+      keyboardAvoid.current.keyboardHeight = endCoordinates.height
+      onKeyboardShow?.()
+      if (adjustPosition) {
+        // 默认沿用旧版本逻辑，在 android 原生关闭键盘避让的情况下应该将该配置设置为 false，走 mpx 的键盘避让逻辑，否则bundle内的所有input都会无法避让键盘
+        const enableNativeKeyboardAvoiding = mpxGlobal?.__mpx?.config?.rnConfig?.enableNativeKeyboardAvoiding ?? true
+        const callback = () => {
+          ref?.current?.measure((x: number, y: number, width: number, height: number, pageX: number, pageY: number) => {
+            function calculateOffset() {
+              // enableNativeKeyboardAvoding 默认开启
+              if (enableNativeKeyboardAvoiding && isAndroid) {
+                const aboveOffset = pageY + height - endCoordinates.screenY
+                const belowOffset = endCoordinates.height - aboveOffset
+                const aboveValue = -aboveOffset >= cursorSpacing ? 0 : aboveOffset + cursorSpacing
+                const belowValue = Math.min(belowOffset, cursorSpacing)
+                return aboveOffset > 0 ? belowValue : aboveValue
+              }
+
               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
-              offset.value = withTiming(value, { duration, easing }, (finished) => {
-                if (finished) {
-                  // Set flexBasic after animation to trigger re-layout and reset layout information
-                  basic.value = '99.99%'
-                }
-              })
-            })
-          })
-        }),
-        Keyboard.addListener('keyboardWillHide', resetKeyboard)
-      ]
-    } else {
-      subscriptions = [
-        Keyboard.addListener('keyboardDidShow', (evt: any) => {
-          if (!keyboardAvoid?.current) return
-          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
-            offset.value = withTiming(value, { duration, easing }, (finished) => {
+              return aboveOffset > 0 ? belowValue : aboveValue
+            }
+
+            cancelAnimation(offset)
+            offset.value = withTiming(calculateOffset(), { duration, easing }, finished => {
               if (finished) {
                 // Set flexBasic after animation to trigger re-layout and reset layout information
                 basic.value = '99.99%'
               }
             })
           })
+        }
+        ;(isIOS ? () => (timerRef.current = setTimeout(callback)) : callback)()
+      }
+    }
+
+    if (isIOS) {
+      subscriptions = [
+        Keyboard.addListener('keyboardWillShow', (evt: any) => {
+          keybaordAvoding(evt, true)
         }),
-        Keyboard.addListener('keyboardDidHide', resetKeyboard)
+        Keyboard.addListener('keyboardWillHide', resetKeyboard)
       ]
+    } else {
+      subscriptions = [Keyboard.addListener('keyboardDidShow', keybaordAvoding), Keyboard.addListener('keyboardDidHide', resetKeyboard)]
     }
 
     return () => {
       subscriptions.forEach(subscription => subscription.remove())
+      timerRef.current && clearTimeout(timerRef.current)
     }
   }, [keyboardAvoid])
 
   return (
-    <View style={style} onTouchEnd={onTouchEnd}>
-      <Animated.View
-        style={[
-          contentContainerStyle,
-          animatedStyle
-        ]}
-      >
-        {children}
-      </Animated.View>
+    <View style={style} onTouchEnd={onTouchEnd} onTouchMove={onTouchEnd}>
+      <Animated.View style={[contentContainerStyle, animatedStyle]}>{children}</Animated.View>
     </View>
   )
 }

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

@@ -22,7 +22,7 @@ import { StyleSheet, View, LayoutChangeEvent } from 'react-native'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { MovableAreaContext } from './context'
-import { useTransformStyle, splitProps, splitStyle, HIDDEN_STYLE, wrapChildren, GestureHandler, flatGesture, extendObject, omit, useNavigation } from './utils'
+import { useTransformStyle, splitProps, splitStyle, HIDDEN_STYLE, wrapChildren, GestureHandler, flatGesture, extendObject, omit, useNavigation, useRunOnJSCallback } from './utils'
 import { GestureDetector, Gesture, GestureTouchEvent, GestureStateChangeEvent, PanGestureHandlerEventPayload, PanGesture } from 'react-native-gesture-handler'
 import Animated, {
   useSharedValue,
@@ -30,7 +30,6 @@ import Animated, {
   withDecay,
   runOnJS,
   runOnUI,
-  useAnimatedReaction,
   withSpring
 } from 'react-native-reanimated'
 import { collectDataset, noop } from '@mpxjs/utils'
@@ -87,7 +86,6 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
   const layoutRef = useRef<any>({})
   const changeSource = useRef<any>('')
   const hasLayoutRef = useRef(false)
-
   const propsRef = useRef<any>({})
   propsRef.current = (props || {}) as MovableViewProps
 
@@ -202,16 +200,6 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
     )
   }, [])
 
-  // 节流版本的 change 事件触发
-  const handleTriggerChangeThrottled = useCallback(({ x, y, type }: { x: number; y: number; type?: string }) => {
-    'worklet'
-    const now = Date.now()
-    if (now - lastChangeTime.value >= changeThrottleTime) {
-      lastChangeTime.value = now
-      runOnJS(handleTriggerChange)({ x, y, type })
-    }
-  }, [changeThrottleTime])
-
   useEffect(() => {
     runOnUI(() => {
       if (offsetX.value !== x || offsetY.value !== y) {
@@ -233,7 +221,7 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
             : newY
         }
         if (bindchange) {
-          runOnJS(handleTriggerChange)({
+          runOnJS(runOnJSCallback)('handleTriggerChange', {
             x: newX,
             y: newY,
             type: 'setData'
@@ -408,13 +396,31 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
     catchtouchend && catchtouchend(e)
   }
 
+  const runOnJSCallbackRef = useRef({
+    handleTriggerChange,
+    triggerStartOnJS,
+    triggerMoveOnJS,
+    triggerEndOnJS
+  })
+  const runOnJSCallback = useRunOnJSCallback(runOnJSCallbackRef)
+
+  // 节流版本的 change 事件触发
+  const handleTriggerChangeThrottled = useCallback(({ x, y, type }: { x: number; y: number; type?: string }) => {
+    'worklet'
+    const now = Date.now()
+    if (now - lastChangeTime.value >= changeThrottleTime) {
+      lastChangeTime.value = now
+      runOnJS(runOnJSCallback)('handleTriggerChange', { x, y, type })
+    }
+  }, [changeThrottleTime])
+
   const gesture = useMemo(() => {
     const handleTriggerMove = (e: GestureTouchEvent) => {
       'worklet'
       const hasTouchmove = !!bindhtouchmove || !!bindvtouchmove || !!bindtouchmove
       const hasCatchTouchmove = !!catchhtouchmove || !!catchvtouchmove || !!catchtouchmove
       if (hasTouchmove || hasCatchTouchmove) {
-        runOnJS(triggerMoveOnJS)({
+        runOnJS(runOnJSCallback)('triggerMoveOnJS', {
           e,
           touchEvent: touchEvent.value,
           hasTouchmove,
@@ -433,7 +439,7 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
           y: changedTouches.y
         }
         if (bindtouchstart || catchtouchstart) {
-          runOnJS(triggerStartOnJS)({ e })
+          runOnJS(runOnJSCallback)('triggerStartOnJS', { e })
         }
       })
       .onStart(() => {
@@ -487,7 +493,7 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
         isFirstTouch.value = true
         isMoving.value = false
         if (bindtouchend || catchtouchend) {
-          runOnJS(triggerEndOnJS)({ e })
+          runOnJS(runOnJSCallback)('triggerEndOnJS', { e })
         }
       })
       .onEnd((e: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => {
@@ -515,7 +521,7 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
                 : y
             }
             if (bindchange) {
-              runOnJS(handleTriggerChange)({
+              runOnJS(runOnJSCallback)('handleTriggerChange', {
                 x,
                 y
               })
@@ -532,7 +538,7 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
             }, () => {
               xInertialMotion.value = false
               if (bindchange) {
-                runOnJS(handleTriggerChange)({
+                runOnJS(runOnJSCallback)('handleTriggerChange', {
                   x: offsetX.value,
                   y: offsetY.value
                 })
@@ -548,7 +554,7 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
             }, () => {
               yInertialMotion.value = false
               if (bindchange) {
-                runOnJS(handleTriggerChange)({
+                runOnJS(runOnJSCallback)('handleTriggerChange', {
                   x: offsetX.value,
                   y: offsetY.value
                 })

package/lib/runtime/components/react/mpx-nav-container.tsx

@@ -0,0 +1,33 @@
+import { AnimatedStyle } from 'react-native-reanimated'
+import { useNavShared } from './useNavShared'
+import { NavSharedContext, NavSharedValue } from './context'
+import { useLayoutEffect, useMemo, useState } from 'react'
+import { StyleProp } from 'react-native'
+import { isAndroid } from './utils'
+
+interface MpxNavContainerProps {
+  children?: React.ReactNode
+}
+
+export default function MpxNavContainer(props: MpxNavContainerProps) {
+  const [, setCustomNav] = useNavShared()
+
+  useLayoutEffect(() => {
+    if (!isAndroid) return
+    if (props.children) {
+      setCustomNav(props.children)
+    }
+
+    return () => {
+      setCustomNav(undefined)
+    }
+  }, [props.children])
+
+  return isAndroid ? null : props.children
+}
+
+export function NavSharedProvider({ children }: { children?: React.ReactNode }) {
+  const [customNav, setCustomNav] = useState()
+  const value = useMemo(() => ({ customNav, setCustomNav } as NavSharedValue), [customNav])
+  return <NavSharedContext.Provider value={value}>{children}</NavSharedContext.Provider>
+}

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

@@ -38,7 +38,7 @@ import Animated, { useSharedValue, withTiming, useAnimatedStyle, runOnJS } from
 import { warn, hasOwn } from '@mpxjs/utils'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
-import { splitProps, splitStyle, useTransformStyle, useLayout, wrapChildren, extendObject, flatGesture, GestureHandler, HIDDEN_STYLE } from './utils'
+import { splitProps, splitStyle, useTransformStyle, useLayout, wrapChildren, extendObject, flatGesture, GestureHandler, HIDDEN_STYLE, useRunOnJSCallback } from './utils'
 import { IntersectionObserverContext, ScrollViewContext } from './context'
 import Portal from './mpx-portal'
 
@@ -210,6 +210,27 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
   const { textStyle, innerStyle = {} } = splitStyle(normalStyle)
 
   const scrollViewRef = useRef<ScrollView>(null)
+
+  const propsRef = useRef(props)
+  const refresherStateRef = useRef({
+    hasRefresher,
+    refresherTriggered
+  })
+
+  propsRef.current = props
+  refresherStateRef.current = {
+    hasRefresher,
+    refresherTriggered
+  }
+
+  const runOnJSCallbackRef = useRef({
+    setEnableScroll,
+    setScrollBounces,
+    setRefreshing,
+    onRefresh
+  })
+  const runOnJSCallback = useRunOnJSCallback(runOnJSCallbackRef)
+
   useNodesRef(props, ref, scrollViewRef, {
     style: normalStyle,
     scrollOffset: scrollOptions,
@@ -518,6 +539,7 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
 
   // 处理刷新
   function onRefresh () {
+    const { hasRefresher, refresherTriggered } = refresherStateRef.current
     if (hasRefresher && refresherTriggered === undefined) {
       // 处理使用了自定义刷新组件，又没设置 refresherTriggered 的情况
       setRefreshing(true)
@@ -529,10 +551,10 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
         }
       }, 500)
     }
-    const { bindrefresherrefresh } = props
+    const { bindrefresherrefresh } = propsRef.current
     bindrefresherrefresh &&
       bindrefresherrefresh(
-        getCustomEvent('refresherrefresh', {}, { layoutRef }, props)
+        getCustomEvent('refresherrefresh', {}, { layoutRef }, propsRef.current)
       )
   }
 
@@ -587,7 +609,7 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     'worklet'
     if (enableScrollValue.value !== newValue) {
       enableScrollValue.value = newValue
-      runOnJS(setEnableScroll)(newValue)
+      runOnJS(runOnJSCallback)('setEnableScroll', newValue)
     }
   }
 
@@ -600,7 +622,7 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     'worklet'
     if (bouncesValue.value !== newValue) {
       bouncesValue.value = newValue
-      runOnJS(setScrollBounces)(newValue)
+      runOnJS(runOnJSCallback)('setScrollBounces', newValue)
     }
   }
 
@@ -649,19 +671,19 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
         if ((event.translationY > 0 && translateY.value < refresherThreshold) || event.translationY < 0) {
           translateY.value = withTiming(0)
           updateScrollState(true)
-          runOnJS(setRefreshing)(false)
+          runOnJS(runOnJSCallback)('setRefreshing', false)
         } else {
           translateY.value = withTiming(refresherHeight.value)
         }
       } else if (event.translationY >= refresherHeight.value) {
         // 触发刷新
         translateY.value = withTiming(refresherHeight.value)
-        runOnJS(onRefresh)()
+        runOnJS(runOnJSCallback)('onRefresh')
       } else {
         // 回弹
         translateY.value = withTiming(0)
         updateScrollState(true)
-        runOnJS(setRefreshing)(false)
+        runOnJS(runOnJSCallback)('setRefreshing', false)
       }
     })
     .simultaneousWithExternalGesture(scrollViewRef)

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

@@ -5,7 +5,7 @@ import Animated, { useAnimatedStyle, useSharedValue, withTiming, Easing, runOnJS
 import React, { JSX, forwardRef, useRef, useEffect, ReactNode, ReactElement, useMemo, createElement } from 'react'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef' // 引入辅助函数
-import { useTransformStyle, splitStyle, splitProps, useLayout, wrapChildren, extendObject, GestureHandler, flatGesture } from './utils'
+import { useTransformStyle, splitStyle, splitProps, useLayout, wrapChildren, extendObject, GestureHandler, flatGesture, useRunOnJSCallback } from './utils'
 import { SwiperContext } from './context'
 import Portal from './mpx-portal'
 /**
@@ -148,6 +148,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
     autoplay = false,
     circular = false,
     disableGesture = false,
+    current: propCurrent = 0,
     bindchange
   } = props
   const easeingFunc = props['easing-function'] || 'default'
@@ -198,14 +199,16 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
   // 每个元素的宽度 or 高度，有固定值直接初始化无则0
   const step = useSharedValue(initStep)
   // 记录选中元素的索引值
-  const currentIndex = useSharedValue(props.current || 0)
+  const currentIndex = useSharedValue(propCurrent)
   // const initOffset = getOffset(props.current || 0, initStep)
   // 记录元素的偏移量
-  const offset = useSharedValue(getOffset(props.current || 0, initStep))
+  const offset = useSharedValue(getOffset(propCurrent, initStep))
   const strAbso = 'absolute' + dir.toUpperCase() as StrAbsoType
   const strVelocity = 'velocity' + dir.toUpperCase() as StrVelocityType
   // 标识手指触摸和抬起, 起点在onBegin
   const touchfinish = useSharedValue(true)
+  // 记录onUpdate时的方向，用于进行onFinalize中的值修正
+  const preUpdateTransDir = useSharedValue(0)
   // 记录上一帧的绝对定位坐标
   const preAbsolutePos = useSharedValue(0)
   // 记录从onBegin 到 onTouchesUp 时移动的距离
@@ -270,7 +273,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
     const iStep = dir === 'x' ? realWidth : realHeight
     if (iStep !== step.value) {
       step.value = iStep
-      updateCurrent(props.current || 0, iStep)
+      updateCurrent(propCurrent, iStep)
       updateAutoplay()
     }
   }
@@ -374,7 +377,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
           easing: easeMap[easeingFunc]
         }, () => {
           currentIndex.value = nextIndex
-          runOnJS(loop)()
+          runOnJS(runOnJSCallback)('loop')
         })
       } else {
         // 默认向右, 向下
@@ -389,7 +392,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
             // 将开始位置设置为真正的位置
             offset.value = initOffset
             currentIndex.value = nextIndex
-            runOnJS(loop)()
+            runOnJS(runOnJSCallback)('loop')
           })
         } else {
           nextIndex = currentIndex.value + 1
@@ -400,7 +403,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
             easing: easeMap[easeingFunc]
           }, () => {
             currentIndex.value = nextIndex
-            runOnJS(loop)()
+            runOnJS(runOnJSCallback)('loop')
           })
         }
       }
@@ -429,12 +432,18 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
   }, [])
 
   function handleSwiperChange (current: number) {
-    if (props.current !== currentIndex.value) {
-      const eventData = getCustomEvent('change', {}, { detail: { current, source: 'touch' }, layoutRef: layoutRef })
-      bindchange && bindchange(eventData)
-    }
+    const eventData = getCustomEvent('change', {}, { detail: { current, source: 'touch' }, layoutRef: layoutRef })
+    bindchange && bindchange(eventData)
   }
 
+  const runOnJSCallbackRef = useRef({
+    loop,
+    pauseLoop,
+    resumeLoop,
+    handleSwiperChange
+  })
+  const runOnJSCallback = useRunOnJSCallback(runOnJSCallbackRef)
+
   function getOffset (index: number, stepValue: number) {
     if (!stepValue) return 0
     let targetOffset = 0
@@ -451,12 +460,12 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
     const targetOffset = getOffset(index || 0, stepValue)
     if (targetOffset !== offset.value) {
       // 内部基于props.current!==currentIndex.value决定是否使用动画及更新currentIndex.value
-      if (props.current !== undefined && props.current !== currentIndex.value) {
+      if (propCurrent !== undefined && propCurrent !== currentIndex.value) {
         offset.value = withTiming(targetOffset, {
           duration: easeDuration,
           easing: easeMap[easeingFunc]
         }, () => {
-          currentIndex.value = props.current || 0
+          currentIndex.value = propCurrent
         })
       } else {
         offset.value = targetOffset
@@ -473,8 +482,8 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
   // 1. 用户在当前页切换选中项，动画；用户携带选中index打开到swiper页直接选中不走动画
   useAnimatedReaction(() => currentIndex.value, (newIndex: number, preIndex: number) => {
     // 这里必须传递函数名, 直接写()=> {}形式会报 访问了未sharedValue信息
-    if (newIndex !== preIndex && bindchange) {
-      runOnJS(handleSwiperChange)(newIndex)
+    if (newIndex !== preIndex && preIndex !== null && preIndex !== undefined && bindchange) {
+      runOnJS(runOnJSCallback)('handleSwiperChange', newIndex, propCurrent)
     }
   })
 
@@ -508,12 +517,12 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
   }, [children.length])
 
   useEffect(() => {
-    // 1. 如果用户在touch的过程中, 外部更新了current以外部为准（小程序表现）
+    // 1. 如果用户在touch的过程中, 外部更新了current以内部为准（小程序表现）
     // 2. 手指滑动过程中更新索引，外部会把current再传入进来，导致offset直接更新，增加判断不同才更新
-    if (props.current !== currentIndex.value) {
-      updateCurrent(props.current || 0, step.value)
+    if (propCurrent !== currentIndex.value && touchfinish.value) {
+      updateCurrent(propCurrent, step.value)
     }
-  }, [props.current])
+  }, [propCurrent])
 
   useEffect(() => {
     autoplayShared.value = autoplay
@@ -603,7 +612,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
           if (touchfinish.value !== false) {
             currentIndex.value = selectedIndex
             offset.value = resetOffset
-            runOnJS(resumeLoop)()
+            runOnJS(runOnJSCallback)('resumeLoop')
           }
         })
       } else {
@@ -613,7 +622,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
         }, () => {
           if (touchfinish.value !== false) {
             currentIndex.value = selectedIndex
-            runOnJS(resumeLoop)()
+            runOnJS(runOnJSCallback)('resumeLoop')
           }
         })
       }
@@ -635,7 +644,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
       }, () => {
         if (touchfinish.value !== false) {
           currentIndex.value = moveToIndex
-          runOnJS(resumeLoop)()
+          runOnJS(runOnJSCallback)('resumeLoop')
         }
       })
     }
@@ -662,19 +671,10 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
       'worklet'
       const { diffOffset, half, isTriggerUpdateHalf } = computeHalf(eventData)
       if (+diffOffset === 0) {
-        runOnJS(resumeLoop)()
+        runOnJS(runOnJSCallback)('resumeLoop')
       } else if (isTriggerUpdateHalf) {
-        // 如果触发了onUpdate时的索引变更，则直接以update时的index为准
-        const targetIndex = !circularShared.value ? currentIndex.value : currentIndex.value + patchElmNumShared.value - 1
-        offset.value = withTiming(-targetIndex * step.value, {
-          duration: easeDuration,
-          easing: easeMap[easeingFunc]
-        }, () => {
-          if (touchfinish.value !== false) {
-            currentIndex.value = targetIndex
-            runOnJS(resumeLoop)()
-          }
-        })
+        // 如果触发了onUpdate时的索引变更
+        handleEnd(eventData)
       } else if (half) {
         handleEnd(eventData)
       } else {
@@ -745,18 +745,19 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
         if (!step.value) return
         touchfinish.value = false
         cancelAnimation(offset)
-        runOnJS(pauseLoop)()
+        runOnJS(runOnJSCallback)('pauseLoop')
         preAbsolutePos.value = e[strAbso]
         moveTranstion.value = e[strAbso]
       })
       .onUpdate((e: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => {
         'worklet'
-        if (touchfinish.value) return
         const moveDistance = e[strAbso] - preAbsolutePos.value
+        if (touchfinish.value || moveDistance === 0) return
         const eventData = {
           translation: moveDistance,
           transdir: moveDistance
         }
+        preUpdateTransDir.value = moveDistance
         // 1. 支持滑动中超出一半更新索引的能力：只更新索引并不会影响onFinalize依据当前offset计算的索引
         const { half } = computeHalf(eventData)
         if (childrenLength.value > 1 && half) {
@@ -790,15 +791,25 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
         }
         preAbsolutePos.value = e[strAbso]
       })
+      .onEnd((e: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => {
+        // 修复某些安卓机型小米 onFinalize拿到的absolute值不正确的问题, onUpdate并不是最终的值
+        preAbsolutePos.value = e[strAbso]
+      })
       .onFinalize((e: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => {
         'worklet'
         if (touchfinish.value) return
         touchfinish.value = true
+        /**
+         * 安卓修正
+         * 问题：部分安卓机型onFinalize中拿到的absoluteX 有问题
+         * 案例：比如手指从右向左滑的时候，onUpdate拿到的是241.64346313476562， 而onFinalize中拿到的是241.81817626953125，理论上onFinalize中应该比onUpdate小才对吧
+         * 解决方式：修正
+        */
         // 触发过onUpdate正常情况下e[strAbso] - preAbsolutePos.value=0; 未触发过onUpdate的情况下e[strAbso] - preAbsolutePos.value 不为0
         const moveDistance = e[strAbso] - preAbsolutePos.value
         const eventData = {
           translation: moveDistance,
-          transdir: moveDistance !== 0 ? moveDistance : e[strAbso] - moveTranstion.value
+          transdir: Math.abs(moveDistance) > 1 ? moveDistance : preUpdateTransDir.value
         }
         // 1. 只有一个元素：循环 和 非循环状态，都走回弹效果
         if (childrenLength.value === 1) {

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

@@ -501,7 +501,7 @@ function parseBgImage (text: string): {
   type?: 'image' | 'linear'
   src?: string
 } {
-  if (!text) return {}
+  if (!text || text === 'none') return {}
 
   const src = parseUrl(text)
   if (src) return { src, type: 'image' }