Недавно создали функцию выхода из системы. Когда пользователь нажимает на кнопку «Выйти», ему будет предложено диалоговое окно с вопросом «Вы уверены, что хотите выйти из системы?». Для Dialog я использовал пакет с именем act-native-popup-dialog .
На самом деле происходит то, что это приложение забито редуксом. Я использовал действие для выхода из системы. А для диалога я использовал состояние уровня компонента.
Мой Диалоговый Код:
<Dialog
visible={this.state.showDialog}
dialogTitle={
<DialogTitle
title="Confirm Logging Out"
textStyle={{ fontSize: 15 }}
/>}
width={0.8}
footer={
<DialogFooter>
<DialogButton
text="CANCEL"
textStyle={{ fontSize: 14 }}
onPress={() => {
this.setState({ showDialog: false });
}}
/>
<DialogButton
text="CONFIRM"
textStyle={{ fontSize: 14 }}
onPress={() => {
this.onLogoutPress();
}}
/>
</DialogFooter>
}
onTouchOutside={() => {
this.setState({ showDialog: false });
}}
>
<DialogContent>
<Text style={{ fontSize: 14, top: 10 }}>Are you sure you want to logout ?</Text>
</DialogContent>
</Dialog>
И мой код кнопки выхода из системы:
<TouchableOpacity onPress={()=> this.setState({ showDialog: true})} >
<CardItem>
<Icon name="log-out" style={{ color: '#03A9F4' }} />
<Body>
<Text>Logout</Text>
</Body>
<Right>
<Icon name="arrow-forward" />
</Right>
</CardItem>
</TouchableOpacity>
Итак, мой onLogoutPress() код:
onLogoutPress() {
this.setState({ showDialog: false },() => {
this.props.logOut(() => {
this.props.navigation.dispatch(resetActionToWelcome);
})
})
}
Проблема, с которой я сталкиваюсь, заключается в том, что, когда я нажимаю кнопку подтверждения, "onLogoutPress()" поднимается вверх, и диалоговое окно не закрывается, вместо этого запускается действие reset действия реакции навигации. Поскольку setstate - это асинхронная функция, я думаю, что потребовалось время, чтобы вернуться, в течение этого действия выход из системы запускается, и приложение запускается с заставки. Но пока диалог остается открытым.
Как с этим бороться?