11｜组件实战：如何实现瀑布流？
荧光笔
直线
曲线- 深入了解
- 翻译
- 解释
- 总结
本文深入介绍了作者如何通过修改 RecyclerListView 组件的源码，实现了瀑布流效果。作者首先强调了准备开发调试环境的重要性，并详细介绍了在 React Native 中如何调试第三方模块 RecyclerListView 的方法，同时提到了调试工具 Flipper 的功能和使用。接着，作者分享了修改 RecyclerListView 源码的关键步骤，包括改变模块路径和解决报错的过程。通过分析 RecyclerListView 组件的源码，读者可以了解到该组件渲染出的 UI 页面由滚动容器和若干个 ViewRenderer 容器组成。此外，文章还介绍了状态、props 和 ViewRenderer 之间的关系，以及 LayoutManager 类的关键方法和实现双列瀑布流布局的思路。对于想要深入了解 React Native 组件源码修改的读者来说，这是一篇非常有价值的文章。文章通过实例和代码解析，帮助读者深入理解了单列布局和双列瀑布流布局的原理，同时提供了修改源码的关键技巧和方法。整体而言，本文对于想要深入学习 React Native 组件源码修改的读者具有很高的参考价值。
《React Native 新架构实战课》，新⼈⾸单¥59
全部留言(13)
- 最新
- 精选
dao三列布局还没有来得及写，单纯抄老师的思路来搞两列的瀑布布局就花了好几个小时。用上了 npm 包的几种修改方式——这是个额外的收获。（https://github.com/hdouhua/hybrid-mobile-app/tree/main/AwesomeProject/src/c11） 要扩展这个组件的瀑布布局就必须阅读源码。阅读源码是很有必要的，也是每个程序员成长和进阶的必经之路！作者回复: 点赞👍 实现三列布局的关键是理解 瀑布流 每一项该放哪。
2022-05-092
大神博士没有现成的高性能瀑布流组件吗，改开源库源码也不是很方便呐作者回复: 现在没有哦
2022-05-25
geeklyc
老师，对于列表垂直滑动吸顶，水平也可以滑动的切换不同的列表，有什么好的实现不？作者回复: 淘宝首页的效果是吧？ 社区有实现，不过代码有点老了，完整 demo 我放在了 Github 手势库 Gesture 的目录下了（过几天上传）。 关键库如下： import { HScrollView } from 'react-native-head-tab-view' import { CollapsibleHeaderTabView } from 'react-native-tab-view-collapsible-header'
2022-04-27
学习中...大佬，这种方式会影响RecyclerListView的复用逻辑吗，感觉这种方式布局view复用逻辑会有问题？作者回复: 不会。 从原理层面，你可以用 Flipper 查看 Tree 的销毁、复用。 从实践层面，你可以用 Xcode AS 等工具查看内存使用情况。
2022-04-22
贺子华运行时修改这个方法没太理解作者回复: 直接上代码吧，看了就懂： https://github.com/jiangleo/react-native-classroom/tree/main/src/11_Waterfall/lib/RecyclerListView
2022-04-212- songyq这个学习曲线有点陡峭2022-08-05归属地：美国4
- 学习中...老师讲的很好，不过试用了demo和结合自己实际项目中的需求来说，魔改RecyclerListView成瀑布流之后还是需要在layoutProvider中设置Dimension.width和height，但是在需求上有可能UI并不能确定好当前瀑布流item的高度，也就是无法说我区分type的方式来确定item，例如文字一行两行多行等需要在item进行了layout之后才能确定，我们没有办法measure，这样的话如果在item的onLayout之后再次刷新高度的话就会出现抖动等问题了。 请教老师一下这种情况有什么解决办法吗？是否能够让recyclerListView和FlatList一样在布局的时候可以自己动态的计算高度或者宽度进行布局呢2022-06-1513
wilson我按着修改完后，瀑布流效果是有了，但是为啥不能滑动了。一滑动就卡死2022-07-041
python4长见识了，以前都是直接复制2022-04-231- 大神博士为什么不用嵌套原生视图的方式？2023-04-30归属地：上海