Я пытаюсь отобразить сообщение об ошибке через выпадающее предупреждение, которое я подключил к избыточному. У меня есть это в основном файле App.js, и компонент слушает изменение состояния ошибки и пропадет через анимацию, чтобы показать сообщение об ошибке. Проблема заключается в том, что после отображения сообщения об ошибке и возврата в исходное состояние я не могу нажать кнопку «Назад».
Я пытался переместить компонент после и до SwitchNavigator.
// Drop down component
const DropDownAlert = props => {
const containerHeight = 120;
const ytranslate = new Animated.Value(-containerHeight);
useEffect(() => {
Animated.sequence([
Animated.spring(ytranslate, {
toValue: 0, //Animate to YPosition: 20
useNativeDriver: true,
easing: Easing.linear,
friction: 100,
tension: 0
}),
Animated.spring(ytranslate, {
delay: 3000, //waits 3s
toValue: -(containerHeight + 25), //Animate to YPosition: 20
useNativeDriver: true,
easing: Easing.linear,
friction: 100,
tension: 0
})
]).start(() => {props.removeAlertMessage});
});
if(!props.alertMessage.isMessage){
return null
}
return (
<View style={styles.container}>
<Animated.View
style={{
...props.style,
transform: [{ translateY: ytranslate }],
opacity: 0.8,
borderWidth: StyleSheet.hairlineWidth,
borderColor: theme.SECONDARY_COLOR
}}
>
<View style={styles.content}>
<View style={styles.iconContainer}>
<MaterialCommunityIcons
name="alert-circle-outline"
size={32}
color={theme.TERTIARY_COLOR}
/>
</View>
<Text style={styles.text}>{props.alertMessage.message}</Text>
</View>
</Animated.View>
</View>
);
};
// app.js return statement
return (
<Provider store={store}>
<AlertMessage/>
<SwitchNavigator uriPrefix={prefix} />
</Provider>
);
Таким образом, я хотел бы иметь возможность отображать сообщение об ошибке в раскрывающемся оповещении, и как только оно вернется, я смогу нажать кнопку "Назад".