1

我是新手,使用 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。

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

在此处输入图像描述

谢谢!

4

1 回答 1

2

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

  const {animation, clock} = useMemo(() => ({
    animation: new Value(0),
    clock: new Clock(),
  }), []);
于 2020-06-10T09:35:26.897 回答