React Native: использование useNativeDriver приводит к исчезновению представления - PullRequest
0 голосов
/ 13 апреля 2020

Может ли кто-нибудь объяснить мне поведение, описанное ниже:

Когда компонент визуализируется, я касаюсь черного прямоугольника, и поле flag будет присвоено true, поэтому оранжевый прямоугольник исчезнет. Затем, когда я снова касаюсь черного прямоугольника, оранжевый прямоугольник не появляется.

После некоторых исследований я обнаружил, что использование useNativeDriver в анимации вызывает такое поведение. Возможно, это связано с тем, что поведение параметра useNativeDriver никогда не возвращает измененное значение анимации в сторону JS, а когда компонент отображает свой пользовательский интерфейс, opacity значение свойства возвращается к исходному значению, равному 0.

Подробности:

react-native 0.60.4
typescript 3.6.3
mobx 5.13.0
mobx-react 6.1.2

Вот код:

import * as React from 'react';
import {observer} from 'mobx-react';
import { Animated, View, Easing } from 'react-native';
import { observable } from 'mobx';
import { CTouchable } from '../../../lib/components/CTouchable';

@observer
export class CAuthIndex extends React.Component {
  @observable private flag: boolean = false;
  private animationValue: Animated.Value = new Animated.Value(0);

  componentDidMount() {
    Animated.timing(this.animationValue, {
      toValue: 1,
      duration: 2000,
      easing: Easing.linear,
      useNativeDriver: true,
    }).start();
  }


  render() {
    return (
      <>
        <CTouchable onPress={() => {
          this.flag = !this.flag;
        }}>
          <View style={{
            height: 100,
            backgroundColor: "black",
          }}/>
        </CTouchable>
        {this.flag ? null : (
          <Animated.View
            style={{
              opacity: this.animationValue,
            }}
          >
            <View style={{
              height: 100,
              backgroundColor: "orange",
            }}/>
          </Animated.View>
        )}
      </>
    );
  }
}

[Upd]: Когда я использую слушатель для текущего значения анимации что-то вроде этого:

  this.animationValue.addListener(({value}) => {
    console.log(value);
  });

, тогда оранжевый прямоугольник выглядит как ожидается.

Заранее спасибо!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...