React native 旋转变换动画前后内容的闪烁（翻转卡动画）

我在iOS和Android上都看到了这种行为。您知道为什么在变换动画开始之后（以及动画结束之前），卡中的内容会闪烁（隐藏然后立即重新出现）

仅当我执行

rotate

、

rotateY

或

rotateX

（未测试的

rotateZ

）时才会发生这种情况。我不知道为什么

以下是视频：

高质量webm-

低质量gif：

我的渲染代码如下：

        <View style={style}>
            <Animated.View style={[styleCommon, styleFace]}><Text>front</Text></Animated.View>
            <Animated.View style={[styleCommon, styleBack]}><Text>front</Text></Animated.View>
        </View>

---

我发现在react native中，它应该是一个

转换

的错误，显示从

0.1度

到

0.4度

，以及从

-0.1度

到

-0.4度

的视图。在这些程度内，一切都消失了

这很容易证明，只要将起始度设置为0.1~0.4

转换：[
{rotateY:anim.interpolate（{inputRange:[0,1]，outputRange:['0.1deg'，'180deg']}）
]

一个快速解决方法是绕过百慕大学位：

const styleFace={
转换：[
{rotateY:this.anim.interpolate（{inputRange:[0,0.01,0.01,1]，outputRange:['0deg'，'0deg'，'0.4deg'，'180deg']}）
]
};
常量styleBack={
转换：[
{rotateY:this.anim.interpolate（{inputRange:[0,0.99,0.99,1]，outputRange:['-180deg'，'-0.4deg'，'0deg'，'0deg']}）
]
};

结果:

---

非常感谢您试用我的代码，尤其是您的屏幕广播！你的头版屏幕广播是带有调试远程js的吗？最下面的一个是关闭远程js？顶部的屏幕播放了一段文字内容。最下面的一个不会闪烁文本内容。我实际上是在世博会上做的，甚至在世博会的制作过程中也看到了这个闪光。也许我应该用纯react native试试。我想你所说的内容闪现意味着不太流畅的动画从前到后滑动back@Noitidart修改了我的答案，这次应该有用=）找到了一种停止文字闪现的方法哇！！！非常感谢@Val！！我永远也想不到这个！！我现在要在RN上提交一个关于这个的bug。你有关于这个bug的链接吗？我可能找不到，我想发布我的屏幕广播。@Noitidart我找不到任何关于它的bug报告。继续编写错误报告，这将非常有帮助=）

const styleCommon = {
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 10,
        elevation: 2,
        shadowRadius: 2,
        shadowOpacity: 0.4,
        shadowOffset: { height:1 },
        overflow: 'hidden',
        width: '100%',
        height: '100%',
        position: 'absolute',
        backgroundColor: '#FFFFFF'
}

    const styleFace = {
        opacity: anim.interpolate({ inputRange:[0,.5,.5,1], outputRange:[1,1,0,0] }),
        transform: [
            { rotateY:anim.interpolate({ inputRange:[0,1], outputRange:['0deg', '180deg'] }) }
        ]
    };
    const styleBack = {
        opacity: anim.interpolate({ inputRange:[0,.5,.5,1], outputRange:[0,0,1,1] }),
        transform: [
            { rotateY:anim.interpolate({ inputRange:[0,1], outputRange:['-180deg', '0deg'] }) }
        ]
    };