在 React Native 中，如何水平翻转视图？答案

【问题标题】：In React Native, how can I flip a View horizontally?在 React Native 中，如何水平翻转视图？
【发布时间】：2019-09-21 22:16:13
【问题描述】：

假设我有一个这样的图标：

<FontAwesome
    name={'column'}
    size={20}
    style={ /* mirror horizontally */ }
/>

如何水平镜像？

【问题讨论】：

标签： react-native transform

【解决方案1】：

React-native 根据docs 使用一组转换，scaleX 属性已被弃用。您可以在 x 轴上按倒数缩放变换：

style={{
  transform: [
    { scaleX: -1 }
  ]
}}

【讨论】：

我收到 transform.forEach 不是函数。
您可能需要分享更多代码。这是一条 CSS 规则，所以我不希望能够在其上调用函数。
@TIMEX 经过一番研究后更新了我的答案，自从我上次使用 react-native 转换道具以来，它们发生了一些变化。

【解决方案2】：

React Native 转换接受数组。所以你必须传递值来转换如下：

<FontAwesome
    name={'search'}
    size={20}
    style={{
        transform: [
            {scaleX: "-1"},
        ]
    }}
/>

【讨论】：

【解决方案3】：

通过style可以用来翻转或反转组件视图的2种方式

fontAwesomeStyle: {
  transform: [
    {rotateX: '180deg'}, //horizontally
    {rotateY: '180deg'} //vertically
    {scaleX: -1} //horizontally
    {scaleY: -1} //vertically
  ]
}

但我更喜欢使用旋转，因为在动画方面很方便

【讨论】：