Может ли кто-нибудь объяснить мне поведение, описанное ниже:
Когда компонент визуализируется, я касаюсь черного прямоугольника, и поле 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);
});
, тогда оранжевый прямоугольник выглядит как ожидается.
Заранее спасибо!