React Native - 动画完成后奇怪的闪光

Question

我有一些非常简单的代码，同时试图制作一个组件来处理暴露子组件的滑入和滑出动画。当动画滑入时它工作正常但当幻灯片关闭时会出现奇怪的闪光。我不知道为什么。 None 的渲染方法在滑块自动关闭后被调用，所以闪光灯的来源让我感到困惑。

None 任何组件的渲染方法在发生这种情况时都会被调用，所以我很困惑闪光灯是从哪里来的。

渲染主视图的gif中看到的主要组件在render方法中有以下内容：

render() {
    const { listPending } = this.state;
    const { sessionModerator } = this.props;

    return (
        <View style={styles.container}>
            {this._renderUserStatusSection()}
            <View style={{ flex: 1 }}>
                <SortableFlatList
                    isModerator={sessionModerator}
                    // contentContainerStyle={Styles.contentContainer}
                    data={this.state.data}
                    renderItem={this._renderItem}
                    scrollPercent={5}
                    onMoveEnd={this._onMoveEnd}
                />
            </View>
            <ListItemAdd
                visible={this.state.addModalVisible}
                closeModal={this.closeAddListModal}
                userId={this.props.user.id}
            />
        </View>
    );
}

并且调用带有滑动组件的函数如下：

_renderUserStatusSection() {
    const { sessionModerator, user } = this.props;

    return (
        <NotificationSlider
            ref={this.notificationSlider}
            autoOpen={true}
            autoClose={4000}
            autoOpenDelay={1000}
            height={144}
        >
            <ModeratorNotification
                user={user}
                closeNotification={this.closeNotification}
                moderatorStart={this.moderatorStart}
            />
        </NotificationSlider>
    );
}

通知滑块组件：

import React, { Component } from 'react';
import { Animated, Easing } from 'react-native';

export class NotificationSlider extends Component {

    constructor(props) {
        super(props);

        this._animate = new Animated.Value(0);
    }

    closeSlider() {
        Animated.timing(this._animate, {
            toValue: 0,
            duration: 500,
            easing: Easing.elastic(0.7)
        }).start();
    }

    openSlider() {
        const { height } = this.props;

        Animated.timing(this._animate, {
            toValue: height,
            duration: 500,
            easing: Easing.elastic(0.7)
        }).start();
    }

    render() {
        const { children } = this.props;

        return (
            <Animated.View style={{ height: this._animate }}>
                {children}
            </Animated.View>
        );
    }

    componentDidMount() {
        const { autoOpen, autoOpenDelay, autoClose } = this.props;

        if (autoOpen) {
            setTimeout(() => {
                this.openSlider();
            }, autoOpenDelay);
        }

        if (autoClose) {
            setTimeout(() => {
                this.closeSlider();
            }, autoClose);
        }
    }
}

通知滑块组件包裹的子组件：

export class ModeratorNotification extends Component {

    render() {
        const { user, closeNotification, moderatorStart } = this.props;

        return (
            <View style={styles.container}>
                <View style={styles.inner}>
                    <View style={styles.content}>
                        <MediaIcon
                            name='close'
                            callback={closeNotification}
                            size={24}
                            color={Colors.white}
                            styles={{
                                position: 'absolute',
                                top: 2,
                                right: 2,
                                zIndex : 1
                            }}
                        />
                        <Title
                            text={user['firstName'] + ','}
                            styles={{
                                marginTop: 4,
                                ...Font.init('title-1-white')
                            }}
                        />
                        <Text
                            style={{
                                marginTop: 4,
                                paddingRight: 20,
                                ...Font.init('body-white')
                            }}>
                            {StaticText.SESSION_SESSION_NO_MODERATOR}
                        </Text>
                    </View>
                    <View style={styles.actions}>
                        <Button
                            text='Become a moderator'
                            callback={moderatorStart}
                            width={160}
                            height={34}
                            styles={{
                                backgroundColor: Colors.twilightBlue,
                                borderRadius: 8,
                                marginTop: 14
                            }}
                            textStyles={{
                                ...Font.init('button-white')
                            }}
                        />
                    </View>
                </View>
            </View>
        );
    }
}

我试过的：

我试图在通知滑块中围绕子项创建一个包装元素，在动画关闭时为其显示 class none，但这变得难以管理，而且似乎真的没有必要。换句话说，我可以找到方法来破解它以在视觉上工作，但我更想知道为什么当这个效果看起来很简单时上面的代码不起作用。

谢谢。

另外，我将 CSS 添加到子组件 (ModeratorNotification)

export const styles = StyleSheet.create({
    container: {
        width: window.width,
        backgroundColor: Colors.ceruleanBlue,
        flex: 1,
        overflow: 'hidden'
    },

    inner: {
        width: '100%',
        paddingRight: 16,
        paddingLeft: 16,
        paddingTop: 12,
        paddingBottom: 12
    },

    actions: {
        alignItems: 'flex-end'
    }
});

Answer 1

我认为这是因为 easing: Easing.elastic(0.7) 属性，根据 this, it may be going to a negative value giving a big height at the end . Try using easing: Easing.linear(0.7) to see if it dissapears. Might be related to

React Native - 动画完成后奇怪的闪光

React Native - Weird flash after animation is finished

javascript

reactjs

react-native

react-native-ios