React Native: анимация не работает должным образом на Android

Я пытался исправить проблему в течение последних 2 дней, она отлично работает на iOS.

constructor(){
  super();

  this.animation = new Animated.Value(0)

  this.state = {
    expanded: false,
  };
}
toggle(){
  let initialValue = this.state.expanded? 1 : 0 ,
     finalValue = this.state.expanded? 0 : 1

  this.setState({
     expanded: !this.state.expanded,
  });

  this.animation.setValue(initialValue)
  Animated.timing(
    this.animation,
    {
      toValue: finalValue,
    }
  ).start();
}

render(){
  return(
    <Animated.View style={{{flex: 1, marginTop: 28, paddingLeft: 25, transform: [{ scale: this.animation }, {perspective: 1000 }]}}}>
     ....
    </Animated.View>

  );
}

Этот компонент является дочерним, используется в родительском, как это: <FeedBack ref={ref => this.feedback = ref}/> без каких-либо условий, чтобы проверить, показывать или нет (поскольку масштаб анимации установлен на ноль в конструкторе, поэтому нет необходимости)

метод toggle() вызывается из родителя при нажатии кнопки.

Теперь this works fine on iOS , когда компонент загружается, представления нет до тех пор, пока не будет нажата кнопка (затем масштабируется). а на android когда компонент загружается, вид уже есть. Когда я нажимаю кнопку, анимированный вид исчезает и снова появляется (с масштабированием анимации), а последующие переключатели работают нормально. Проблема в Android заключается в том, что хотя initialValue шкалы равно нулю, представление все еще существует при первой загрузке.


react-native react-animated
person Yasir    schedule 14.11.2017    source источник

Ответы (1)


arrow_upward
33
arrow_downward

Это была проблема с react-native на стороне Android уже некоторое время (вздох). Кажется, что установка значения 0 лишает его характеристик, в основном считая его null, а затем возвращаясь к использованию его фактического значения после того, как оно было анимировано до > 0.

Обходной путь - установить анимацию вот так this.animation = new Animated.Value(0.01);

Вы можете следить за выпуском здесь

person Ryan Turnbull    schedule 14.11.2017
comment
черт, братан, какая пустая трата моего времени .. спасибо за супер звуковой ответ - person Yasir; 14.11.2017
comment
Попробуйте обойти? интересно посмотреть, как пойдет. Можно также анимировать непрозрачность, если скрыть ее, если она все еще очень мала. - person Ryan Turnbull; 14.11.2017
comment
v0.63.3. Спасибо. Раньше ширина просто выбирала 0 или 1, а не интерполировала. Даже установка 1 для меня работает, а не только 0,01......... const parentRef = useRef(new Animated.Value(.01)); Animated.timing(parentRef.current, {toValue, продолжительность: 200, useNativeDriver: false, смягчение: Easing.bezier(.5,1.2,1,1)}); ‹Анимация...› style={[{ width: parentRef.current.interpolate({ inputRange: [0, 1], outputRange: [autoScale(100), autoScale(50)], }), }]} ›‹ /..› - person master_dodo; 22.04.2021