feat: RN 环境支持 sectionList 组件 by yandadaFreedom · Pull Request #2511 · didi/mpx

yandadaFreedom · 2026-06-02T11:37:59Z

No description provided.

- 将 sticky-header、sticky-section 接入模板内建组件转换 - 调整 RN section-list 属性命名与头尾高度配置 - 同步更新扩展组件、RN 组件文档及 mpx2rn skill 参考

- 移除 sticky-header/sticky-section 占位组件 - 更新 RN 组件文档中的 sticky-section/sticky-header 说明 - 调整 section-list 头尾组件数据传递，确保 listHeaderData/listFooterData 更新触发渲染

- 组合 style 移入 scrollAdditionalProps，避免被 innerProps.style 覆盖导致 height/width/layoutStyle 丢失 - 对齐 mpx-scroll-view，未显式设置 flex/flexGrow 时默认追加 flexGrow: 0，避免 RN ScrollView baseStyle 的 flexGrow: 1 把 height 拉伸成 100%

ExtendComponentsPlugin 到 file 阶段解析 - 将 ExtendComponentsPlugin 从 before-file -> resolve 改为 before-file -> file - 在 file 阶段直接重定向扩展组件的 path/ relativePath - 跳过已处理的扩展组件请求，避免重复解析

hiyuki · 2026-06-05T11:26:27Z

@@ -0,0 +1,549 @@
+import { forwardRef, useRef, useState, useEffect, useMemo, createElement, useImperativeHandle, memo } from 'react'


onRefresh / onEndReached / onScroll 未 useCallback，每次渲染都生成新引用，会被作为 prop 传到 SectionList，触发不必要的子树渲染。参考 mpx-scroll-view.tsx 内对 throttle/scroll 回调的处理。
scrollAdditionalProps.style 用 […] 数组字面量，每次渲染都产生新 ref，可考虑 useMemo。
useState(!!refresherTriggered) + useEffect 同步外部 prop 的写法：与 mpx-scroll-view.tsx:933-941 中现有方案保持一致即可，但可考虑直接受控（去掉 state）以减少状态机分支。
getGeneric 在每次 useMemo 中重新 memo(forwardRef(…)) 包一层：每次 generichash 或 key 变化都会创建新组件类型，挂载的子组件状态会丢失。建议把工厂提到模块顶层并缓存，或直接复用 __mpxGenericsMap 的引用。
hasOwn(style, 'flex') || hasOwn(style, 'flexGrow') ? null : { flexGrow: 0 }：可用 useMemo 缓存。

refresherTriggered 直接受控（去掉 state）以减少状态机分支，done

getGeneric直接返回 __mpxGenericsMap 里登记的同一个组件引用，不再包装，done

hiyuki · 2026-06-05T11:35:52Z

+    if (!position) return
+    const [sectionIndex, itemIndex] = position.split('_')
+    const targetSectionIndex = Number(sectionIndex) || 0
+    const targetItemIndex = itemIndex === 'header'


1.3 scrollToIndex 对 footer 的 itemIndex 偏移可能有误
packages/webpack-plugin/lib/runtime/components/react/mpx-section-list.tsx:618-625

const targetItemIndex = itemIndex === 'header'
? 0
: itemIndex === 'footer'
? convertedListData[targetSectionIndex].data.length + 1
: Number(itemIndex) + 1
RN 的 SectionList.scrollToLocation 中 itemIndex 的含义：

0 = section header
1..data.length = data 项
data.length + 1 才会被识别为 section footer（在某些版本里则是越界）
这里 data.length + 1 实际算到了 data 之后的第一个槽位。如果 section 内 data 长度为 N：

第一项 itemIndex = 1，最后一项 itemIndex = N
footer 在不同 RN 版本中需要传 N + 1（有 header）或 N（无 header 时少一格）

RN 0.74 和 RN 0.77 两个版本每个 section 占 data.length + 2 个槽位，始终固定布局（header + data + footer）

错误处理与组件名解析

- getGeneric 去掉多余的 memo(forwardRef(...)) 二次包装，直接返回 generics map 里的组件 - refreshing 改为派生值，删除 useState + useEffect 同步外部 prop 的镜像写法，避免多一次 commit - refresher-enabled 时的 refreshing 字段合并进 scrollAdditionalProps 主对象，移除事后 mutate

hiyuki · 2026-07-01T08:45:08Z

+            return callback()
+          }
+          if (!result) {
+            pushError(new Error(`Extended component "${componentName}" resolved to "${targetPath}", but the target file was not found.`))


这里透传callback就好了

hiyuki · 2026-07-01T08:46:59Z

@@ -0,0 +1,91 @@
+const path = require('path')
+const toPosix = require('../utils/to-posix')
+const EXTEND_COMPONENT_PATH_REGEXP = /\/lib\/runtime\/components\/extends\//


限定过于模糊，至少需要精确到@mpxjs/webpack-plugin/lib/...

hiyuki · 2026-07-01T08:50:33Z

+const EXTEND_COMPONENT_PATH_REGEXP = /\/lib\/runtime\/components\/extends\//
+const EXTEND_COMPONENT_TARGET_SUB_PATH = 'lib/runtime/components/react/dist/'
+const EXTEND_COMPONENTS = {
+  'section-list': ['ios', 'android', 'harmony']


留一下未来的平台拓展吧，比如web支持了section-list的映射形式

hiyuki · 2026-07-01T09:56:39Z

+      // 检查组件是否在配置中
+      const supportedModes = EXTEND_COMPONENTS[componentName]
+      if (!supportedModes) {
+        pushError(new Error(`Extended component "${componentName}" was not found. Available extended components: ${Object.keys(EXTEND_COMPONENTS).join(', ')}`))
+        return callback()
+      }
+
+      // 获取当前模式下的组件路径
+      if (!supportedModes.includes(mode)) {
+        pushError(new Error(`Extended component "${componentName}" cannot be used on the ${mode} platform. Supported platforms include: ${supportedModes.join(', ')}`))
+        return callback()


合成一个报错还是走callback(new Error吧)，核心点还是在于当前模式下找不到extends的组件

…into feat-section-list-review

yandadaFreedom added 12 commits June 2, 2026 16:30

feat: add rn section-list component

849b546

feat: 支持section footer

f8694a7

docs: 补充section footer 文档

24646a8

chore: 删除单测

8a531ce

fix: 手势协同支持原生手势

0b8c742

chore: 删除占位文件

86f6243

docs: 更新section-list相关文档

fa10339

docs: 更新section-list相关文档

e862610

Merge branch 'master' into feat-section-list-review

3b3dc96

docs: 更新section-list相关文档

cf8a6be

docs: 更新section-list相关文档

1ee12fe

fix: 修复 section-list 滚动索引与头尾高度计算

d4a9fe1