react-native-tab-view的两个问题记录

Posted 2023-03-09

参考技术A

最近在使用 react-native-tab-view 时发现了两个问题。

1.安卓上手势冲突

问题描述：如上图，红框banner区域的滑动会和整个页面（作为Tab中的一项）的滑动冲突，在安卓上表现出的现象就是大概率滑动banner触发的都是页面的滑动。

预期：滑动banner不触发页面的滑动，非banner区域触发。

问题原因：组件内部的Pager控制手势用的是 react-native-gesture-handler 中的PanGestureHandler，banner用的是 @react-native-community/viewpager ，猜测就是这两个库的手势冲突了

解决方案：因为 RN 没法处理手势优先级，思路就是如果两者底层都是用一个Pager是不是就没这个问题。于是将 react-native-tab-view 的Pager替换成 @react-native-community/viewpager ，果然问题就解决了。

PS: 这里要注意 react-native-tab-view 在2.10版本以上支持自定义Pager,可以用官方readme中推荐的 react-native-tab-view-viewpager-adapter ；如果是小于2.10版本，又不好升级（因为2.10开始要升 react-native-reanimated ，而它又牵涉到Android X，需要 RN 60+的支持），这个时候就只能改源码了。

PPS:由于替换成了viewPager，还解决了一级页面需要套一层 gestureHandlerRootHOC 的问题，gestureHandlerRootHOC 导致的crash问题也就自然解决了。

2.低端机上 Tab 定位慢的问题

问题描述：如上图，左右分别是before和after,在低端机上我们发现tab切过去后，tab栏的定位以及内容的展示要好几秒才完成。

预期：滑动后立即响应

问题原因：这个问题通过对源码的调试发现，居然是tabitem上切换时文字动画拖累的，所有其它的动画都要等这个动画完成才执行，具体为什么这个动画如此慢，还需要继续研究。大概就是下面这样一段动画处理：

解决方案：我们在低端机或者全平台去掉这个动画即可

最后，如果大家觉得 react-native-tab-view 真的很坑，向大家推荐我司同学自己封装的一个tab库： https://github.com/smadey/react-native-tabify ，上述问题都不存在。