MasonryFlashList 瀑布流布局列高不均 解决方案 瀑布流布局列高不均 演示效果 最终我对此做了回复 👉🏻 issues/946#issuecomment-1972392998 方法1：【仅解决了双列】58的方案 方案源码 👉🏻 https://github.com/jiangleo/react-native-classroom/blob/main/src/11_Waterfall/lib/RecyclerListView/WaterfallLayoutProvider.ts 但，只修改为了 支持双列瀑布流布局，也不是基于最新recyclerlistview版本 58大佬分析的 recyclerlistview的布局原理，Nice 方法2：【较完美的】Masonry layout manager and provider #526 方案 可惜，并没有被merge，作者似乎不再关注这个项目了。 然后，也没有提供patch，但有人提供了package 和 Demo，非常赞！ 👉🏻 方案来源 package: recyclerlistview-masonrylayoutmanager Demo: https://snack.expo.dev/@robertli93/grid_example Demo效果非常棒！ 滚动流畅 + 布局均匀 为何未被合并？ 难道是因为PR评论区的已知小bug？还是作者不再维护？ 方法3:【最完美】MasonryFlashList 本身支持优化排列 见官方文档 masonry#optimizeitemarrangement 1 If enabled, MasonryFlashList will try to reduce difference in column height by modifying item order. If true, specifying overrideItemLayout is required. Default value is false. 在看源码时，发现MasonryFlashList.tsx中，底部可见如下说明

有这么一个常见的需求 在对某个帖子进行点赞后，该帖子所出现的各个地方，e.g.帖子列表(可能多处)、帖子详情(可能多个)，点赞状态实时同步、数量加/减1同步。 iOS 方案 在iOS，我是在每个帖子 所对应的 Model(数据)对象里 监听通知，判断 帖子ID，ID匹配 则更新 点赞状态，以此达到操作点赞后 实时同步同一帖子的点赞状态，非常简单好使！ RN 方案 但RN里，数据是一个{id:xx, ...}这样的对象，是不支持像在iOS那样，在这样对象里 写监听通知的代码的。 于是，那就放到hooks去实现。 Q：那需要什么样的hooks呢？ A：也就是需要怎样的 设计最优雅的API，or调用方式 （如下），才是决定了设计什么样的hooks函数 最优雅API 调用方式 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 const PostComp = () => { const { isActive: liked, activeCount: likeCount, changeActiveStatus: changeLikeStatus, } = useActiveStatus({ id: id, originalActiveCount: originalLikeCount, originalActiveStatus: originalLikedStatus, notificationKey: kPostLikeStatusChangeNotification, requestFunc: ({ isActive }) => { return likePost({ postId: id, isLike: isActive }); // send request to toggle liked status }, }); return ( <View> <Icon liked={liked} /> <Text>{likeCount}</Text> <Button onPress={() => { changeLikeStatus() }} /> </View> ) } useActiveStatus这个hooks的实现源码， 如下

用了3年RN了，第一次给RN提交PR，有点激动，值得记录呀！ 操作记录 git操作全在github完成 2023.12.05 7:52PM 提交 fork -> 创建分支 -> 改代码 -> 提交 然后进入pull request tab ，就能看到Compare & pull request入口，点击它 生成的PR地址： https://github.com/facebook/react-native/pull/41803 然后就进入 PR描述编辑区，按提示编辑完，提交即可 首次提交PR，提示需要签署CLA 跳转到这里 https://github.com/facebook/react-native/pull/41803/checks?check_run_id=19326140445 再打开 https://code.facebook.com/cla， 进行签署CLA 签署后，这个页面就进入一个无法编辑的状态，虽然顶部有提示，如果在签CLA之前已经提交了一个，再耐心等待会，会自动处理的 👉🏻这个友人的经历是很好的借鉴 于是，从21:49，等啊等，到了 23:54，才有反馈 第二天早上一看 10:13，还给了我建议，我点击一下 Commit suggestion就ok了 最后就差maintainer批准了 一般多久批准呢？ 浏览了2个merged的PR，都是2天 2023.12.13 11:24PM 终于收到邮件 PR被合并 1 This pull request was successfully merged by @zyestin in 5217cc9. 并且紧接着收到邮件 PR被关闭 1 Closed #41803 via 5217cc9. 那何时 带有我贡献的代码 会被发布呢？ 等待下一个版本被推出的时候咯 待续~

ScrollView滚动动画 实现起来就很容易 源码 展开查看 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 import React, { useRef, useEffect } from "react"; import { ScrollView, Text, View, Animated, Easing } from "react-native"; /** * ScrollView自动滚动了！ */ const AutoScrollScrollView = () => { const scrollViewRef = useRef(); const scrollY = useRef(new Animated.

常用hooks依赖检查，从源头提醒避免奇葩bug https://github.com/facebook/react/issues/14920 ESLint提供，检查useEffect依赖 && autoFix， 用上后 估计能大大降低 无法获取state最新值、漏掉依赖后奇怪的bug

patch-package 补丁工具使用