<style>使用动画API发行带有react-native的卡片翻转动画的问题

Question

使用动画API进行卡片翻转动画时，我遇到了问题。

期望：当我点击翻转按钮时，我看到了卡片的背面。

发生的事情：当我单击“翻转”按钮时，正面被镜像，而背面仍然隐藏在后面。

GIF插图

  import React，{组件} from'react';
导入{
  视图，
  StyleSheet，
  动画的
}来自“ react-native”；
从'./UI/MainButton'导入MainButton;
从'./UI/MainText'导入MainText;

导出默认类MyComponent扩展了Component {
  构造函数（道具）{
    超级（道具）;
    this.state = {isFlipped：false，flipValue：new Animated.Value（0）};
    this.interpolateFront = this.state.flipValue.interpolate（{
      inputRange：[0，180]，
      outputRange：['0deg'，'180deg']，
    }）;
    this.interpolateBack = this.state.flipValue.interpolate（{
      inputRange：[0，180]，
      outputRange：['180deg'，'360deg']，
    }）;
  }

  handleTouch（）{
    const {isFlipped，flipValue} = this.state;
    让rotationConfig = {
      摩擦力：6
      张力：20，
      useNativeDriver：是的，
    };

    if（isFlipped）{
      rotationConfig = {
        ... rotationConfig，
        toValue：0，
      };
    }其他{
      rotationConfig = {
        ... rotationConfig，
        值：180，
      };
    }
    Animated.spring（flipValue，rotationConfig）.start（）;
    this.setState（{isFlipped：！isFlipped}）;
  }

  render（）{
    const frontStyle = {
      转变： [
        {rotateY：this.interpolateFront}
      ]
    };
    const backStyle = {
      转变： [
        {rotateY：this.interpolateBack}
      ]
    };
    const coin =（
      <查看>
        
          面孔
        

        
          
            王冠
          
        
      
    ）;
    返回（
      <查看样式= {styles.container}>
        {硬币}
         this.handleTouch（）} />
      
    ）;
  }
}

const styles = StyleSheet.create（{
  容器： {
    alignItems：'中心'，
    justifyContent：“中心”

  }，
  flipFront：{
    宽度：150，
    高度：150，
    borderRadius：100，
    backgroundColor：'rgb（50，190，152）'，
    backfaceVisibility：“隐藏”，
    alignItems：'中心'，
    justifyContent：“中心”，
  }，
  backFlip：{
    backgroundColor：'rgb（128，96，99）'，
    位置：“绝对”，
    上：0，
  }
}）;  

操作系统： Mint 19

我无法在iOS中重现此问题。猜猜这绝对是Android上的问题。