javascript - react native : Prevent animation from blocking app?

Question

我构建了一个 react native 动画，以在加载文章列表时显示占位符/加载器:

    Animated.loop(
      Animated.sequence([
        Animated.timing(this._animation_state.opacity, {
          toValue: this._animation_state.target_opacity,
          duration: this.props.animationDuration,
          delay: this.props.animationDelay,
          useNativeDriver: true
        }),
        Animated.timing(this._animation_state.opacity, {
          toValue: this.props.minOpacity,
          duration: this.props.animationDuration,
          useNativeDriver: true
        })
      ]),
      {
        iterations: 1
      }
    ).start(() => this.startAnimation())

此组件用于显示文章正在另一个组件中加载，如下所示:

render() {
  return (
      {this.state.articles.length === 0 ? (
      <Loader articles={this.state.articles} />
    ) : (
      <TableOfContents navigation={this.props.navigation} />
    )}
  );
}

问题在于动画会阻止检查 this.state.articles.length === 0 直到完成，从而本质上使其自身成为同步/阻塞(因此无用)。

有什么方法可以确保此动画不会阻止线程更新和检查状态吗？ useNativeDriver 似乎没有任何效果。

Answer 1

通过 https://facebook.github.io/react-native/docs/animated#loop

loops can prevent VirtualizedList-based components from rendering more rows while the animation is running. You can pass isInteraction: false in the child animation config to fix this.

因此，像这样更新动画可以解决这个问题:

Animated.loop(
  Animated.sequence([
    Animated.timing(this._animation_state.opacity, {
      toValue: this._animation_state.target_opacity,
      duration: this.props.animationDuration,
      delay: this.props.animationDelay,
      useNativeDriver: true,
      isInteraction: false
    }),
    Animated.timing(this._animation_state.opacity, {
      toValue: this.props.minOpacity,
      duration: this.props.animationDuration,
      useNativeDriver: true,
      isInteraction: false
    })
  ]),
  {
    iterations: -1
  }
).start()