react-native - 使用 react-native-redash 时意外闪烁

Question

我是新手，使用 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>
    )
}

这将使用简单的动画（如不透明度或缩放）打开一个模式，并在按下关闭按钮时关闭。

当模态打开时，一切都按预期工作。问题是模式何时关闭。附上一个描述性问题的 gif。

当模态关闭时，您有什么想法如何解决这个闪烁的动画？

谢谢！

Answer 1

尝试将您的Animated值放入备忘录中，这样它就不会在组件重新渲染时重置值

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