Question

我有一个React Native应用程序。有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是一个还原操作。

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不会冻结进度条动画。

再次看到该过程：

进度条动画正在运行
每隔10秒setInterval就会执行http请求并阻塞主UI线程（带有进度条动画）约2秒
请求完成后，动画恢复正常

预先感谢

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线程中运行，因此动画不会被阻止。

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

1 个答案: