我如何在本机反应中一次垂直和水平翻转图像。答案

【问题标题】：How can i flip images vertically and Horizontally at a time in react native.我如何在本机反应中一次垂直和水平翻转图像。
【发布时间】：2018-11-08 20:09:42
【问题描述】：

我可以垂直或水平翻转图像但我想要同时执行这两个操作。有什么办法吗？

【问题讨论】：

标签： image react-native flip

【解决方案1】：

您应该使用来自 react-native 的 Animated。代码如下所示。

import React, { Component } from 'react';

从 'react-native' 导入 { View, Text, TouchableOpacity, Animated };

导出默认类 AppProject 扩展组件 {

constructor(){

  super();


}

flip_Card_Animation=()=> {

    Animated.spring(this.animatedValue,{
      toValue: 0,
      tension: 10,
      friction: 8,
    }).start();
}

render() {

  this.SetInterpolate = this.animatedValue.interpolate({

    inputRange: [0, 180],

    outputRange: ['180deg', '360deg']

  })

  const Rotate_Y_AnimatedStyle = {

    transform: [

      { rotateY: this.SetInterpolate }

    ]

  }

  return (

    <View style={styles.MainContainer}>

        <Animated.Image source={{uri : 'https://reactnativecode.com/wp-content/uploads/2018/02/motorcycle.jpg'}} 
        style={[Rotate_Y_AnimatedStyle, styles.imageViewStyle]}>

        </Animated.Image>

        <TouchableOpacity style={styles.TouchableOpacity_button} onPress={this.flip_Card_Animation} >

          <Text style={styles.TextStyle}> Click Here Flip </Text>

        </TouchableOpacity>

    </View>

);
}

希望对您有所帮助。

【讨论】：

它可以只翻转垂直或水平视图，但是如何使用两个 TouchableOpacity 来同时垂直和水平翻转。

【解决方案2】：

您可以通过在图像样式中添加transform: [ { scaleX: -1 },{ scaleY: -1 }] 来实现此目的。

<Image source={{uri: 'https://d33wubrfki0l68.cloudfront.net/3a27dc4d9b5ed67b4b773f049b5de2466101f3b7/e47c0/img/showcase/facebook.png'}}
  style={{ width: 100, height: 100, transform: [ { scaleX: -1 },{ scaleY: -1 }] }}/>

【讨论】：