天马行空的味道做直播送礼面板的时候，很常见的一个交互就是底部一排礼品图标横向滑动。放到React Native里，最直接的方案就是写一个ScrollView，把horizontal设为true，然后里面铺数据。这个写法在iOS和Android上跑了很久都挺稳的，但到了鸿蒙适配这一层就出现了一些有意思的细节——RN的ScrollView并不是直接映射到系统控件，而是经由适配层转换成了ArkUI的Scroll，横向属性也要跟着转换一遍。稍有不注意，就会出现列表不滚动、内容被裁切、滚动事件不回调这些问题。
这篇文章就从“横向滚动的礼品列表”这个具体场景切入，梳理RN ScrollView horizontal的实现要点、鸿蒙适配层到底做了哪些转换、实际项目里怎么落地，以及我踩过的几个坑。适合正在做React Native鸿蒙跨端需求、或者刚接触RNOH（React Native on OpenHarmony）适配、想搞清楚ScrollView和ArkUI Scroll之间关系的同学参考。
1. 场景拆解与技术选型
1.1 礼品列表为什么选了横向滚动
礼品列表最常见的形态有两种，一种是九宫格纵向排布，另一种就是底部一栏横向滑动。我这次的项目需求是直播间的送礼面板，核心约束有三个：礼物数量不能太多、单屏展示必须醒目、用户左右滑动要比上下滑动更符合直觉。
在这种场景下，横向滚动的ScrollView比GridView更合适。原因不复杂：直播间底部区域本身高度就有限，如果纵向排列，一屏只能看到两行，想找后面的礼物就只能不断上下翻，用户注意力会被打断。改成横向滑动后，每一行可以放更大的礼品图标和价格标签，从视觉上看也更接近于“货架陈列”的效果，主播送礼的冲动会更强一点。
所以这个横向滑动的决策不是UI层面的随意选择，而是交互逻辑驱动的。在RN里实现这个布局很直观：ScrollView加horizontal属性，contentContainerStyle里控制左右间距，子节点用flexDirection: 'row'排列。如果你只是写到这里，那跨iOS和Android基本没有任何问题，真正需要留神的是这套代码跑在鸿蒙设备上时发生了什么。
1.2 为什么不是纯ArkUI，也不是全部自绘
有人会问，既然项目要上鸿蒙，为什么不用ArkUI从头写一遍？不用别的原因，最直接的就是业务代码里已经沉淀了大量RN组件和逻辑，重复实现一遍人力成本太高。另一个原因是RN生态里有很多现成的社区库，比如图片加载、动画、状态管理，纯ArkUI生态目前还没法做到一一对应。
这里的跨端方案走的是RN鸿蒙适配层，也就是社区里常说的RNOH路线。它做的事情简单概括就是：让RN业务代码在鸿蒙设备上通过一个C++桥接层跑起来，同时把RN的虚拟DOM树映射成ArkUI的组件树。不是简单的WebView套壳，也不是把RN源码编译成鸿蒙原生，而是组件级的映射。也就是说，你在RN里写的ScrollView，在鸿蒙端真正渲染出来的控件，实际上是ArkUI的Scroll。
这带来的好处是业务侧不用感知鸿蒙底层差异，同一份JS代码可以在iOS、Android和鸿蒙三端跑。但代价是适配层的转换经常出现“中间翻译偏差”，比如horizontal属性在ArkUI里对应的是scrollable方向控制，很多隐含的默认行为和RN端不完全一致。
1.3 横向列表的技术选型比较：ScrollView还是FlatList
如果礼物数量达到几十上百个，有人会建议用FlatList替代ScrollView，理由是FlatList做了懒加载，不会一次性渲染全部子节点。理论上这个建议是对的，但对于礼物列表这种场景，我的结论是ScrollView更合适。
原因有两个。第一，礼物面板的单页数据量通常控制在20到30个以内，全部节点即使一次性渲染，对RN和ArkUI来说压力都不大。第二，ScrollView的子节点布局更可控，尤其是要做“分页滑动”或者“吸附效果”时，直接操作ScrollView内部内容的偏移量会简单很多。FlatList为了懒加载做了大量的虚拟化计算，有些内部的measure逻辑在鸿蒙适配层上还不够成熟，反而容易出现空白项或者时序错乱。
如果你的需求是无限的商品流，那必须用FlatList。但如果只是固定数量的礼品列表，我更建议用ScrollView加horizontal属性，代码简单、逻辑直观，鸿蒙适配层转换起来也最稳定。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. ScrollView horizontal的核心实现细节
2.1 horizontal属性背后的布局机制
React Native里ScrollView的横向滚动，很多人只记住了加一个horizontal参数，却没想过这个参数切换的时候底层发生了什么。本质上，ScrollView内部是一个可滚动的容器，容器里面放着一个“内容视口”，horizontal为true时，内容视口的布局方向被强制设定为主轴朝右，滚动方向也就变成了横向。
在代码层面有两个细节很容易被忽略。第一个是contentContainerStyle，这个style作用于整个内容视口，而不是ScrollView外壳。做横向布局的时候，如果你是直接给ScrollView设置flexDirection: 'row'，那多半没用，子节点们仍然会按默认方式布局。正确的做法是让ScrollView内部的ContentContainer保持flexDirection: 'row'，这样所有子节点才会在横轴方向依次排列。
第二个细节是子节点的宽度和高度约束。横向ScrollView的内容高度默认会被约束为ScrollView的可视高度，但内容是横向溢出的。如果某个子节点的高度写得比较大，又设置了alignItems: 'center'，在iOS和Android上的表现就不一致，鸿蒙适配层对alignItems的处理也可能存在偏差。遇到这种情况我一般会直接给每一个子item一个固定宽度和百分比高度，宁可多写一点样式，也不要依赖容器默认的拉伸行为。
2.2 滚动控制：onScroll、pagingEnabled与snapToInterval
礼品列表这种场景一般有两种滚动交互需求。一种是自由滚动，用户手指滑到哪