React native 使用react native redash时出现意外闪烁

我最新使用react-native redash来执行一些基于react-native reanimated库的动画（在性能方面非常棒）

我的代码如下：

const Alert = (props) => {
    const [visible, setVisible] = React.useState(false);
    const [message, setMessage] = React.useState(null);
    const animation = new Value(0);
    const clock = new Clock();

    React.useEffect(() => {
        setMessage(props.message);
        setVisible(props.visible);
    }, [props]);

    useCode(() =>
        block([
            set(
                animation,
                timing({
                    clock,
                    from: visible ? 0 : 1,
                    to: visible ? 1 : 0,
                    duration: 500,
                    easing: Easing.inOut(Easing.ease)
                })
            ),
            debug('Algo visible', animation)
        ], [animation])
    );

    const scale = mix(animation, 0, 1)
    const opacity = mix(animation, 0, 1)

    const from = 'transparent';
    // const to = 'rgba(0,0,0,.75)';
    const to = 'rgba(0,0,0,.75)'
    const backgroundColor = interpolateColor(animation, {
        inputRange: [0, 1],
        outputRange: [from, to]
    });

    /* if(!props.visible){
        console.log("OK");
        return null;
    } */

    return (
        <Animated.View
            style={[styles.container, { backgroundColor, transform: [{ scale: scale }] }]}>
            <Animated.View
                style={[
                    styles.inner,
                    {
                        transform: [{ scale }],
                        opacity
                    }
                ]}>
                <TouchableOpacity
                    activeOpacity={1}
                    onPress={() => {
                        setVisible(false)
                        setTimeout(() => {
                            props.onClosed();
                        }, 150);
                    }}
                    style={styles.close}>
                    <Image
                        source={require('app/src/assets/images/common/close_x2.png')}
                        style={{ width: 16, height: 16, resizeMode: 'contain' }}
                    />
                </TouchableOpacity>
                <Text style={styles.message}>{ message }</Text>
            </Animated.View>
        </Animated.View>
    )
}

const-Alert=（道具）=>{
const[visible，setVisible]=React.useState（false）；
const[message，setMessage]=React.useState（null）；
常量动画=新值（0）；
常数时钟=新时钟（）；
React.useffect（（）=>{
设置消息（道具消息）；
设置可见（道具可见）；
}[道具]；
使用代码（（）=>
挡块([
设置(
动画
时机({
时钟，
从：可见？0:1，
至：可见？1:0，
持续时间：500，
放松：放松。输入输出（放松。放松）
})
),
调试（'算法可见'，动画）
]，[动画]）
);
常量比例=混合（动画，0，1）
常量不透明度=混合（动画，0，1）
const from=‘透明’；
//常数to='rgba（0,0,0,75）'；
常数to='rgba（0,0,0,75）'
const backgroundColor=插值颜色（动画{
输入范围：[0，1]，
输出范围：[从，到]
});
/*如果（！道具可见）{
控制台日志（“OK”）；
返回null；
} */
返回(

谢谢！
尝试将您的
动画值放入备忘录中，这样它就不会在组件重新加载时重置值

  const {animation, clock} = useMemo(() => ({
    animation: new Value(0),
    clock: new Clock(),
  }), []);

很有魅力，谢谢你，德米特里！