Reaction-native: Перерисовка родной анимации при размонтировании

Question

Взгляните на следующий пользовательский компонент Switch, который демонстрирует проблему с собственной анимацией драйвера.Если коммутатор смонтирован с отключенным состоянием, включен и затем отключен, анимация сбрасывает его перед отключением (не через вызов для рендеринга).Это похоже на проблему с собственным драйвером, поскольку его отключение решает проблему.

import React, { Component } from 'react';
import { Animated, TouchableOpacity } from 'react-native';

export default class Switch extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isOn: props.value, // Use state instead of props for responsiveness
      translateX: new Animated.Value(props.value ? 20 : 0),
    };
  }

  _onPress = () => {
    const { isOn, translateX } = this.state;
    const { onValueChange } = this.props;
    this.setState({ isOn: !isOn }, () => {
      onValueChange(!isOn);
      Animated.spring(translateX, {
        toValue: isOn ? 0 : 20,
        friction: 5,
        tension: 40,
        useNativeDriver: true, // Set this to false to fix unmounting re-draw
      }).start();
    });
  }

  render() {
    const { isOn, translateX } = this.state;
    return (<TouchableOpacity onPress={this._onPress} style={{ borderWidth: 1, borderColor: 'rgba(255,255,255,0.8)', width: 45, height: 25, borderRadius: 20, justifyContent: 'center' }} activeOpacity={0.7}><Animated.View style={{ backgroundColor: 'rgba(255,255,255,0.8)', width: 20, height: 20, borderRadius: 25, marginHorizontal: 1, transform: [{ translateX }] }} useNativeDriver /></TouchableOpacity>);
  }
}