React Native rotateY 导致文本模糊答案

【问题标题】：React Native rotateY results in blurry textReact Native rotateY 导致文本模糊
【发布时间】：2015-10-12 02:27:21
【问题描述】：

我正在为 iOS 设备在 React Native 中开发一个翻转卡片组件，这就是我接触它的方式：

<Animated.View ref="container" style={{position:'relative',transform:[{rotateY:'0deg'}]}}>
    <View ref="frontFace"><Text>Front face</Text></View>
    <View ref="backFace" style={{transform:[{rotateY:'-180deg'}]}}><Text>Back face</Text></View>
</Animated.View>

使用容器视图中的绝对位置重叠两个视图
使用 rotateY:'-180deg' 翻转背面
当点击翻转按钮时，使用动画组件翻转容器，方法是将容器的 rotateY 从“0deg”插入到“180deg”

很抱歉上面的代码过于简化 - 这段代码也可以正常运行。问题是背面在模拟器中是模糊的，在设备上是丑陋的像素化。

有没有办法解决这个问题？或者有什么更好的关于如何实现翻牌组件的建议？

谢谢！！！

【问题讨论】：

好的，通过将背面拉出容器并同时旋转它以避免嵌套转换来解决它。但这似乎有点麻烦——我想知道是否有办法控制渲染质量。
我遇到了完全相同的问题。有什么建议吗？

标签： react-native

【解决方案1】：

替换 transform: [{ rotateY: '-180deg'}] 风格与： transform : [{scaleX: -1}] 解决了它。

【讨论】：

【解决方案2】：

在我的网页中，也有文字模糊的问题， transform: scaleX(-1); 解决问题。

【讨论】：

【解决方案3】：

你可以使用

transform: [{
    skewY: '-180deg'
}],

而不是

transform: [{
    rotateY: '-180deg'
}],

在您的背面视图上。对我来说，这在 iOS 和 Android 上就像一个魅力。

【讨论】：