Question

我在组件渲染过程中遇到了一个非常典型的滞后动画问题。但是，据我所知，我在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，但在我的情况下它没用：当渲染开始时，用户仍然可以点击标签栏按钮而不是等待渲染结束的选项（延迟）

我将代码上传到github存储库（https://github.com/benjaminbillet/tabbartest），以防您想了解更多详细信息。这很简单，但请不要犹豫，向我提出更多细节。

其他一些信息：

react-native 0.46.4
node 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);
}

具有反应原生的Laggy动画（标签栏/寻呼机）

0 个答案: