Question

我有一些非常简单的代码，同时尝试制作一个可以处理动画的滑动组件，从而暴露出子组件。当动画在幻灯片中正常播放时，但在幻灯片关闭时会出现怪异的闪光。我不知道为什么。滑块自动关闭后，没有一个渲染方法被调用，所以闪光灯的源使我感到困惑。

发生这种情况时，不会调用任何组件的任何render方法，因此它使我感到困惑，因为闪光灯来自哪里。

在呈现主视图的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>
        );
    }
}

我尝试过的操作：

我试图在Notification Slider中的子元素周围创建一个wrapper元素，从而在动画关闭时不显示任何内容，但是这变得很难管理，而且似乎真的没有必要。换句话说，我可以找到一些方法来破解此代码，以使其在视觉上起作用，但是我更想知道当这种效果看起来很简单时，为什么上面的代码无法起作用。

谢谢。

另外，我将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

根据this，我认为这是因为easing: Easing.elastic(0.7)属性可能会变为负值，并最终使高度变大。尝试使用easing: Easing.linear(0.7)看看它是否消失。可能与this

有关

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

1 个答案: