技术的学习与积累是个技术活

今年对我来说，是充满挑战和成长的一年。咱们就从博客、技术、工作这三个方面来聊聊我的2024年。

咱们项目里用的那个第三方UI库，就是那个叫native-base的，版本是3.4.2，里面有个Actionsheet组件。但是呢，我们发现在realme V11 5G这款手机上，这个Actionsheet出了点兼容性的小问题。具体来说，就是这个弹窗的高度被压缩得特别小，结果里面的内容都显示不全，整个弹窗的内容都看不清楚，这就有点影响用户的操作体验了。

今天，为了深入分析React Native（RN）框架中的一个UI问题，我需要查看RN组件对应的Android原生组件视图层级（View tree）的实际情况。为了解决这个问题，我检查了Layout Inspector的设置，确保我选择了正确的Activity和视图层级。经过一番调整后，我终于能够正确地查看和分析RN组件对应的Android原生组件。这个过程提醒我，即使是熟悉的工具，随着时间的推移和软件的更新，也需要重新学习和适应。我立刻意识到，这可能是因为界面默认选中的视图并不是我期望的那个。

从原生组件传递属性到 React Native

属于活久见系列，最近工作上遇了该问题：背景：前端 APP使用 Android CameraX 的接口，拍摄并上传图片，然后 Python后端服务对图片裁剪。后端服务处理图片时有遇到image file is truncated的问题。还好我们前端 APP有做相关的数据埋点，以及日志收集到功能，利用这些基础设施，我们定位到了出问题的设备是一台红米，设备信息如下我们还拿到了出异常时， APP拍摄出的图片，图片确实是被损坏了。如下是图片部分的截图，跟网络上遇到该问题时是一样的，图片底层渲染是打码的效果。

Android webview 加载页面时DOM storage API权限记得要打开

vivo S18(V2323A) Android 14， 使用FlashList分页加载数据，加载更多数据时，快速滑动列表，向上或向上滑动 ，会出现崩溃

哇哦，搞Android开发经常遇到的问题，这类问题不大，先分析好相关的依赖，然后排除冲突。

H5页面直接使用React的示例与原理说明

可以看原文的尽量看英文版。下面这个是中文解读版。

如题，这里只能说是处理，起正向作用的临时方案，因为我也着实没搞懂这个BUG的具体原因，看github上有提相关的issues，但看官方没有给出具体的解决方案！我遇到的case跟上面issues差不多，都是long lists——即数据量比较大的列表，大概有500左右的数据项，然后上面是列表项是不同类型的（估计是聊天消息对框话之类的列表吧），但我这边列表项是同一种类型的，每个列表项需要显示一张小的缩略图以及相关的文字描述。

最近在fix一些bug中，发现不少代码是函数式组件中不区别场景，任何函数式组件中的变量都是使用useState，然后没有考虑到useState是异步更新值的，导致各种离奇的BUG出现！；另外看到相关代码中出现大量的setTimeout操作，估计想用它来规避useState是异步更新值的特型，这种情况下代码就更容易出bug，也很难维护！当使用 useState 时，我们如果不正确地处理异步操作，可能会导致意料之外的行为。

结合函数式组件越来越流行的趋势，个人推荐使用 usebackhandler hook 处理返回键

如题，默认console.log输出的日志是13位的时间戳，然后不方便查查看与对比代码运行点的耗时，我们可以简单的重写 console.log方法，增加自定义时间戳格式，如下是增加时间（时，分，秒）解决方案：在RN 主index.js文件加增log方法的‘扩展“

亲测日志输出好用一些，trace会很卡（建议当代码很混乱时才考虑用，方便查看具体的调用处）！

最简单、方便、快速的方法是自己写段shell 代码来截图片，不然打开AS首先会很快，然后AS又很占内存的！

如题RN的原生模块/Native Modules的开发是一项很重要的技能，但RN官网的示例又比较简单，然后最近我接触与使用、还有阅读了[react-native-ble-manager](https://github.com/innoveit/react-native-ble-manager)的部份源码，发现里边完全包含了一个Native Modules所涉及的知识点/技术点，故特推荐给大家，共同学习与交流

记录与分享react项目开发常用的组件或工具等

记录与分享 react native debug工具的使用