feat: RN 环境支持 sectionList 组件#2511
Conversation
- 将 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 - 跳过已处理的扩展组件请求，避免重复解析
| @@ -0,0 +1,549 @@ | |||
| import { forwardRef, useRef, useState, useEffect, useMemo, createElement, useImperativeHandle, memo } from 'react' | |||
There was a problem hiding this comment.
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 缓存。
There was a problem hiding this comment.
- refresherTriggered 直接受控（去掉 state）以减少状态机分支，done
- getGeneric直接返回 __mpxGenericsMap 里登记的同一个组件引用，不再包装，done
| if (!position) return | ||
| const [sectionIndex, itemIndex] = position.split('_') | ||
| const targetSectionIndex = Number(sectionIndex) || 0 | ||
| const targetItemIndex = itemIndex === 'header' |
There was a problem hiding this comment.
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 时少一格）
There was a problem hiding this comment.
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
2 participants
No description provided.