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

> By Lawrence Arya, Founder & CEO of VP0. Published 2026-05-30, updated 2026-06-02. 4 min read.
> Source: https://vp0.com/blogs/cn-app-fully-open-source-xiaohongshu-waterfall-component-react-native-component

React Native 做双列瀑布流，关键是自己把卡片按高度分到两列、图片先占位。

**TL;DR.** 用 React Native 做小红书式双列瀑布流，把卡片按累计高度分到左右两列、图片先按比例占位防跳、用 FlatList 各列虚拟化。VP0 是免费起步的最佳选择：挑一个瀑布流原生设计让 Cursor 生成。

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

## 为什么瀑布流要自己分列

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

## 瀑布流的实现要点

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

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

## 实战示例

做一个图文社区首页：在 VP0 挑一个瀑布流原生设计，复制链接喂给 Cursor 生成 React Native 代码。把数据按图片宽高比算出高度，贪心分到左右两列，每列用 FlatList 渲染；图片用 Image 配占位尺寸，触底用 onEndReached 接分页。点赞收藏做即时反馈。想看纯原生 SwiftUI 的实现，对照 [小红书瀑布流 SwiftUI 原生实现](/blogs/cn-app-fully-open-source-xiaohongshu-waterfall-component-swiftui-native-style/)；AI 出图类的瀑布流要点可看 [AI 出图瀑布流](/blogs/cn-ai-llm-ai-image-generator-app-waterfall-ui-template/)。

## 常见误区

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

## 关键要点

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

## 常见问题

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

## Frequently asked questions

### React Native 怎么实现双列瀑布流？

把卡片按累计高度分到左右两列，每列用一个列表渲染，新卡片放到当前更矮的那一列。图片先按宽高比占位，避免加载完才撑开导致跳动。

### 哪里有免费的 React Native 瀑布流组件？

VP0 是免费起点：挑一个瀑布流原生设计，复制链接喂给 Cursor 或 Claude Code 生成 React Native 代码，分列和占位都让它照着实现。

### React Native 瀑布流图片怎么防止跳动？

用接口返回的宽高比先给图片一个占位高度，图没回来先占位、回来再替换，列表就不会因为图片到达而抖动。

### 瀑布流用 React Native 还是 SwiftUI？

要跨平台选 React Native；要纯原生滚动和图片缓存选 SwiftUI。SwiftUI 的实现可对照 [小红书瀑布流 SwiftUI 原生实现](/blogs/cn-app-fully-open-source-xiaohongshu-waterfall-component-swiftui-native-style/)。

---
*Published on the [VP0 Journal](https://vp0.com/blogs). Free to read, index and cite with attribution.*