Question

我已经构建了一个反应本机动画，以在加载文章列表时显示占位符/加载器：

    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

循环可以阻止基于VirtualizedList的组件在动画运行时渲染更多行。您可以在子动画配置中传递isInteraction：false来解决此问题。

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

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()

React Native：阻止动画阻止应用程序？

1 个答案: