React Native的rotateY导致文本模糊

Question

我正在为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>

1. 在一个容器视图内使用绝对位置重叠两个视图
2. 使用rotateY:'-180deg'旋转背面
3. 当翻转按钮被点击时，通过插值容器的rotateY属性从'0deg'到'180deg'来使用Animated组件翻转容器

很抱歉上面的代码过于简化 - 这段代码也可以正常且顺畅地工作。问题是模拟器中的反面模糊，在设备上则像素丑陋。

有没有办法解决这个问题？或者有任何更好的建议来实现翻转卡片组件吗？

谢谢！

- Wonil Suh

---

好的，通过将背面从容器中拉出并同时旋转它来解决了问题，以避免嵌套变换。但这似乎有点麻烦 - 我想知道是否有一种方法来控制渲染质量。 - Wonil Suh

我遇到了完全相同的问题。有什么提示吗？ - alma

Answer 1

将样式 transform: [{ rotateY: '-180deg'}] 替换为 transform : [{scaleX: -1}] 可以解决问题。

- William

Answer 2

在我的网页中，也存在模糊文本的问题， transform: scaleX(-1); 可以解决这个问题。

- Engin Morse

Answer 3

你可以使用

。

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

而不是

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

在你的后置摄像头视图上。对我来说，在iOS和Android上都能完美运行。

- Alexander Kuttig