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，上述问题都不存在。

最后编辑于：2020.03.11 15:10:30