我在组件渲染期间有一个非常典型的滞后动画问题 . 但是，据我所知，我在react-native文档中找到的常见解决方案无法应用于我的用例 .

让我解释一下：我有一个标签寻呼机实现了（i）包含一组页面的ViewPagerAndroid和（ii）由一组可触摸和一条线（Animated.View）组成的标签栏，当它移动时（translateX变换）寻呼机X滚动值的变化 .

每个页面组件遵循相同的逻辑：

  • 当调用componentDidMount时，它会触发网络调用以加载数据

  • 加载数据后，将使用新数据更新状态，并重新呈现组件

  • render方法只返回一个显示已加载数据的FlatList（仅限20个项目）

我的问题是：如果用户在呈现页面时单击选项卡，则动画会非常滞后 . 鉴于动画和重新渲染是在UI线程上执行的，我猜他们正在以某种方式竞争 .

我消除了各种原因，但无法找到合适的解决方案来保持动画流畅：

  • 我用硬编码数据和简单的超时替换了网络调用;重新呈现页面时，UI仍然是滞后的

  • 我试图改善重新渲染时间，但即使使用纯组件，FlatList也很慢 .

  • 我在发布模式下尝试过，没有任何区别

  • 问题也发生在物理设备上（Nexus 5X，功能非常强大）

  • 这不是我的实现，我试过github.com/skv-headless/react-native-scrollable-tab-view和github.com/zbtang/React-Native-ViewPager

  • 我知道InteractionManager和TimerMixin.requestAnimationFrame，但是's useless in my case: when the rendering is started, the user can still click on the tab bar buttons and it'不是等待渲染结束（滞后）的选项 .

我将我的代码上传到github存储库（https://github.com/benjaminbillet/tabbartest），以防您想要了解更多详细信息 . 它's quite straightforward, but don'犹豫地问我更多细节 .

一些其他信息：

  • react-native 0.46.4

  • 节点8.2.0

  • npm 5.3.0

  • 仅在Android上尝试过 .

你认为我应该填写错误报告吗？

非常感谢 .

EDIT-1 这是动画代码的简化版本：

render() {
  const underlineStyle = {
    position: 'absolute',
    left: 0,
    bottom: 0,
    width: this.tabWidth,
    height: underlineHeight,
    backgroundColor: underlineColor,
    transform: [{
      translateX: this.pagerScrollX.interpolate({
        inputRange: [0, 1],
        outputRange: [0, this.tabWidth],
      }),
    }],
  };

  return (
    <View style={[styles.tabs, style]}>
      ...
      <Animated.View style={underlineStyle} />
    </View>
  );
}

onPageScroll(offset) {
  const { offset, position } = e.nativeEvent;
  this.pagerScrollX.setValue(position + offset);
}
android user-interface animation react-native