Merge branch 'master' into fix-rn-onAppHide

Author: hiyuki

docs-vitepress/guide/platform/rn.md

@@ -1164,6 +1164,37 @@ level 有效值：
 | ----------------| --------------------------------------------------- |
 | bindchange       |  点击导致 checked 改变时会触发 change 事件，`event.detail = { value }`   |
 
+#### slider
+滑动选择器。
+
+属性
+
+| 属性名                   | 类型     | 默认值         | 说明                                                       |
+| ----------------------- | ------- | ------------- | ---------------------------------------------------------- |
+| min                     | number  | `0`           | 最小值                                                     |
+| max                     | number  | `100`         | 最大值                                                     |
+| step                    | number  | `1`           | 步长，取值必须大于 0，并且可被(max - min)整除                 |
+| disabled                | boolean | `false`       | 是否禁用                                                   |
+| value                   | number  | `0`           | 当前取值                                                   |
+| color                   | color   | `#e9e9e9`     | 背景条的颜色（已废弃，请使用 backgroundColor）               |
+| selected-color          | color   | `#1aad19`     | 已选择的颜色（已废弃，请使用 activeColor）                   |
+| activeColor             | color   | `#1aad19`     | 已选择的颜色                                               |
+| backgroundColor         | color   | `#e9e9e9`     | 背景条的颜色                                               |
+| block-size              | number  | `28`          | 滑块的大小，取值范围为 12 - 28                              |
+| block-color             | color   | `#ffffff`     | 滑块的颜色                                                 |
+
+事件
+
+| 事件名           | 说明                                                 |
+| ----------------| --------------------------------------------------- |
+| bindchange      | 完成一次拖动后触发的事件，`event.detail = {value}`     |
+| bindchanging    | 拖动过程中触发的事件，`event.detail = {value}`         |
+
+注意事项
+
+1. 不支持 `show-value` 属性，即不支持在滑块旁显示当前数值
+2. 当设置了 `step` 时，最终值会按步长进行对齐
+
 #### navigator
 页面链接。
 

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

@@ -8,6 +8,18 @@ module.exports = function ({ print }) {
       el.isBuiltIn = true
       return 'mpx-slider'
     },
+    android (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-slider'
+    },
+    harmony (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-slider'
+    },
+    ios (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-slider'
+    },
     props: [
       {
         test: /^color$/,

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

@@ -11,7 +11,7 @@ const JD_UNSUPPORTED_TAG_NAME_ARR = ['functional-page-navigator', 'live-pusher',
 // 快应用不支持的标签集合
 const QA_UNSUPPORTED_TAG_NAME_ARR = ['movable-view', 'movable-area', 'open-data', 'official-account', 'editor', 'functional-page-navigator', 'live-player', 'live-pusher', 'ad', 'cover-image']
 // RN不支持的标签集合
-const RN_UNSUPPORTED_TAG_NAME_ARR = ['open-data', 'official-account', 'editor', 'functional-page-navigator', 'live-player', 'live-pusher', 'ad', 'slider', 'audio', 'camera', 'match-media', 'page-container', 'editor', 'keyboard-accessory', 'map']
+const RN_UNSUPPORTED_TAG_NAME_ARR = ['open-data', 'official-account', 'editor', 'functional-page-navigator', 'live-player', 'live-pusher', 'ad', 'audio', 'camera', 'match-media', 'page-container', 'editor', 'keyboard-accessory', 'map']
 
 /**
  * @param {function(object): function} print

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

@@ -35,7 +35,7 @@ import Animated, {
 
 import useInnerProps from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
-import { useLayout, useTransformStyle, extendObject } from './utils'
+import { useLayout, useTransformStyle, extendObject, useRunOnJSCallback } from './utils'
 import Portal from './mpx-portal'
 
 export interface ProgressProps {
@@ -70,7 +70,6 @@ const Progress = forwardRef<
     active = false,
     'active-mode': activeMode = 'backwards',
     duration = 30,
-    bindactiveend,
     style = {},
     'enable-var': enableVar,
     'external-var-context': externalVarContext,
@@ -80,7 +79,7 @@ const Progress = forwardRef<
   } = props
 
   const nodeRef = useRef(null)
-  const propsRef = useRef({})
+  const propsRef = useRef(props)
   propsRef.current = props
 
   // 进度值状态
@@ -113,6 +112,22 @@ const Progress = forwardRef<
     style: normalStyle
   })
 
+  // 使用 useRunOnJSCallback 处理动画回调
+  const runOnJSCallbackRef = useRef({
+    triggerActiveEnd: (percent: number) => {
+      const currentProps = propsRef.current
+      if (currentProps.bindactiveend) {
+        currentProps.bindactiveend({
+          type: 'activeend',
+          detail: {
+            percent: percent
+          }
+        })
+      }
+    }
+  })
+  const runOnJSCallback = useRunOnJSCallback(runOnJSCallbackRef)
+
   // 进度条动画函数
   const startProgressAnimation = (targetPercent: number, startPercent: number, animationDuration: number, onFinished?: () => void) => {
     // 根据 active-mode 设置起始位置
@@ -125,25 +140,13 @@ const Progress = forwardRef<
       },
       (finished) => {
         if (finished && onFinished) {
-          // 在动画回调中，需要使用runOnJS回到主线程
-          runOnJS(onFinished)()
+          // 在动画回调中，执行传入的worklet函数
+          onFinished()
         }
       }
     )
   }
 
-  // 创建在主线程执行的事件回调函数
-  const triggerActiveEnd = (percent: number) => {
-    if (bindactiveend) {
-      bindactiveend({
-        type: 'activeend',
-        detail: {
-          percent: percent
-        }
-      })
-    }
-  }
-
   // 进度变化时的动画效果
   useEffect(() => {
     const targetPercent = Math.max(0, Math.min(100, percent))
@@ -161,19 +164,18 @@ const Progress = forwardRef<
       const percentDiff = Math.abs(targetPercent - startPercent)
       const animationDuration = percentDiff * duration
 
-      // 创建动画完成回调
-      const onAnimationFinished = () => {
-        triggerActiveEnd(targetPercent)
-      }
-
       // 执行动画
-      startProgressAnimation(targetPercent, startPercent, animationDuration, onAnimationFinished)
+      startProgressAnimation(targetPercent, startPercent, animationDuration, () => {
+        'worklet'
+        // 在worklet函数内部执行runOnJS调用runOnJSCallback
+        runOnJS(runOnJSCallback)('triggerActiveEnd', targetPercent)
+      })
     } else {
       progressWidth.value = targetPercent
     }
 
     setLastPercent(targetPercent)
-  }, [percent, active, activeMode, duration, bindactiveend])
+  }, [percent, active, activeMode, duration])
 
   // 初始化时设置进度值
   useEffect(() => {