如何防止React Native中的setInterval阻止正在运行的动画？

Question

我有一个反应本地应用程序。 有2个部分：票证和票证详细信息。 在“票证”组件中，有一个票证列表。 当用户单击单个票证时，将显示“票证详细信息”组件。 在“票证”组件中，有一个setInterval，它每10秒从服务器检索一次票证。 在“门票详细信息”组件中，有动画进度条（使用react native Animated模块）。

问题：“门票详细信息”组件中的动画每10秒冻结一次。 怎么解决？

我猜这是因为setInterval阻止了主UI线程。

我想： - https://facebook.github.io/react-native/docs/interactionmanager.html ，但我甚至不设法打电话对我的RN 0.58 runAfterInteractions。

接下来想到的是https://github.com/joltup/react-native-threads 。 但这是一个本机模块，存在一些令人恐惧的问题，例如“内存泄漏”和其他构建指令，因此我真的不想使用它。

我想我想念一种更简单的方法来解决这个问题。

这就是我在“票证”组件中获取票证的方式。 getTickets是一个redux操作。

componentDidMount() {
this.timer = setInterval(() => {
    const {getTickets} = this.props;
    getTickets();
 }, 10000);
}

这是“票证详细信息”组件中的动画进度条。 我怀疑这在此问题上是否有用。 仅供参考。

<ProgressBarAnimated 
    value={100} 
    barAnimationDuration={progressBarAnimationDuration} 
    width={progressBarWidth}
    borderWidth={0}
    backgroundColor='#1d1e1f'
    height={8}
    borderRadius={0} />

我希望setInterval不会冻结进度栏动画。

我再次看到该过程：

1. 进度条动画正在运行

2. 每隔10秒setInterval执行HTTP请求并阻塞主UI线程（带有进度条动画）2秒钟

3. 请求完成后，动画恢复正常

Answer 1

动画被阻止，因为它在JS线程而不是UI线程中运行。

您应该通过https://facebook.github.io/react-native/docs/animated在UI线程中运行动画，并带有useNativeDriver：true选项。 使用此选项，动画将变得流畅。

另请注意，如果您使用PanResponder + Animated，则useNativeDriver选项不起作用 。 您可以使用https://github.com/wix/react-native-interactable 。 我已经尝试过，并且所有触摸动画都在UI线程中运行，因此动画不会被阻止。