У меня есть действительно простой код, когда я пытаюсь создать компонент, который будет обрабатывать анимацию скольжения и вставки, обнажая дочерние компоненты. Когда слайды анимации работают правильно, но когда слайды закрыты, происходит странная вспышка. Я не могу понять, почему. Ни один из методов рендеринга не вызывается после автоматического закрытия ползунка, поэтому источник вспышки сбивает меня с толку.
Ни один из методов рендеринга какого-либо из компонентов не вызывается, когда это происходит, поэтому меня сбивает с толку, откуда исходит вспышка.
Основной компонент, видимый в gif, который отображает главное представление, имеет следующее в методе визуализации:
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>
);
}
}
Что я пробовал:
- Я попытался создать элемент-обертку вокруг дочерних элементов в ползунке уведомлений, предоставив ему класс отображения, когда анимация закрывается, но это стало трудным для управления, и казалось действительно ненужным. Другими словами, я могу найти способы взломать это, чтобы работать визуально, но я бы предпочел знать, почему приведенный выше код не работает, когда этот эффект кажется достаточно простым.
Спасибо.
Дополнительно я добавляю 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'
}
});