react-native中taro-ui的Toast与Dialog弹窗冲突,导致弹窗不显示
Toast.hide()异步隐藏动画未完成时立即显示Dialog会导致显示问题。解决方案是使用setTimeout延迟400毫秒后再调用Dialog.show(),确保Toast完全隐藏后才弹出对话框。通过这种方式可以避免UI冲突,确保Toast和Dialog的正确先后显示顺序。
·
造成的原因:Toast.hide() 实际是异步动画隐藏,还未隐藏就执行了弹窗导致
Toast.loading('加载中...')
const record = await queryByUserConsumerRecord({
tplId: tplId.current,
telPhoneList: telPhoneList,
archiveId: archiveId.current
})
Toast.hide()
if(record?.data?.length === 0) {
Dialog.show({
...dialogCommonProps,
message: '当前会员近半年未购买过任何慢病商品不符合建档要求!',
confirmText: '知道了',
showCancel: false,
onConfirm: () => {
navigateBack()
},
})
}
解决方案:延迟一会再调用 Dialog.show()
Toast.loading('加载中...')
const record = await queryByUserConsumerRecord({
tplId: tplId.current,
telPhoneList: telPhoneList,
archiveId: archiveId.current
})
Toast.hide()
if(record?.data?.length === 0) {
setTimeout(() => {
Dialog.show({
...dialogCommonProps,
message: '当前会员近半年未购买过任何慢病商品不符合建档要求!',
confirmText: '知道了',
showCancel: false,
onConfirm: () => {
navigateBack()
},
})
}, 400)
}
更多推荐
所有评论(0)