React Native rotateY 导致文本模糊

Question

我正在 React Native 中为 iOS 设备开发一个翻盖组件，这就是我的方法：

<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 组件翻转容器

对上面过于简化的代码感到抱歉——这段代码也能正常运行。问题在于模拟器中的背面模糊，并且在设备上像素化难看。

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

谢谢！！！

Answer 1

你可以使用

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

代替

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

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