小红书瀑布流 React Native 组件实现

用 React Native 做小红书那种双列错落的瀑布流，第一个要面对的现实是：没有现成的错落控件能直接用。FlatList 的多列模式只能做等高网格，真正的高度错落得自己动手，把卡片按累计高度分到左右两列。把这件事想清楚，剩下的图片占位、惰性加载就都好办了。设计起步用一个瀑布流原生稿，让 Cursor 生成代码，省去反复手调。

为什么瀑布流要自己分列

图文社区很多是深色起家，而约 82% 的智能手机用户 偏好深色，瀑布流一旦图片乱跳、两列高度悬殊，深色下的观感会更糟。React Native 里没有内置错落布局，得靠一个简单的贪心思路：每张卡片放到当前更矮的那一列。每列再各自用 FlatList 虚拟化，几百张图滚动也不卡。配合 Expo 真机预览，分列效果一眼能验。分列算法本身不复杂，真正费心思的是处理图片高度未知：在图片加载前先用接口返回的宽高比预估高度来分列，等图片真到了就不必整体重排，否则一边加载一边跳列，体验会很糟，这一步省不得。

瀑布流的实现要点

用 React Native 把瀑布流做对，关键是下面几块。

要点	React Native 实现要点
双列错落	按累计高度把卡片分到更矮一列
图片占位	按宽高比先占位，防跳动
惰性加载	每列用 FlatList 虚拟化
触底加载	onEndReached 接分页

实战示例

做一个图文社区首页：在 VP0 挑一个瀑布流原生设计，复制链接喂给 Cursor 生成 React Native 代码。把数据按图片宽高比算出高度，贪心分到左右两列，每列用 FlatList 渲染；图片用 Image 配占位尺寸，触底用 onEndReached 接分页。点赞收藏做即时反馈。想看纯原生 SwiftUI 的实现，对照 小红书瀑布流 SwiftUI 原生实现；AI 出图类的瀑布流要点可看 AI 出图瀑布流。

常见误区

最常见的错误是用 FlatList 的 numColumns 硬凑瀑布流，结果每行被最高的卡片撑开，错落感全无。正确做法是自己分列。另一个坑是图片不给占位，加载完一张跳一下，整列抖得没法看，用宽高比先占位就能解决。把分列和占位这两件事做对，瀑布流就稳了，剩下的互动和分页才有意义。

关键要点

• React Native 没有现成瀑布流，双列错落要按累计高度自己分列。
• 约 82% 的用户偏好深色，瀑布流的观感和稳定尤其重要。
• 图片按宽高比先占位防跳，每列用 FlatList 虚拟化扛长列表。
• 想免费起步，VP0 是挑瀑布流设计、让 AI 生成 React Native 的最佳选择。

常见问题

关于 React Native 做瀑布流，问得最多的是怎么实现双列错落、图片怎么防跳、和 SwiftUI 怎么选。一句话收尾：瀑布流的难点不在控件，而在你愿不愿意自己写那个把卡片分到更矮一列的简单算法，写一次，后面整个项目都受用。