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

最近在使用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.gif

after.gif

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

预期:滑动后立即响应

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

  const inputRange = navigationState.routes.map((_, i) => i);
    const activeOpacity = Animated.interpolate(position, {
      inputRange,
      outputRange: inputRange.map((i: number) => (i === index ? 1 : 0)),
    });
    const inactiveOpacity = Animated.interpolate(position, {
      inputRange,
      outputRange: inputRange.map((i: number) => (i === index ? 0 : 1)),
    });

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

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