我正在为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'来使用Animated组件翻转容器
很抱歉上面的代码过于简化 - 这段代码也可以正常且顺畅地工作。问题是模拟器中的反面模糊,在设备上则像素丑陋。
有没有办法解决这个问题?或者有任何更好的建议来实现翻转卡片组件吗?
谢谢!