React Native: запретить анимацию блокировать приложение?

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