javascript - 当 Internet 连接从 ON 更改为 OFF 时,Snackbar 不显示
问题描述
我使用 NetInfo 库来检测 Internet 连接是否可用。它工作得很好,但是当 Internet 从打开更改为关闭时,NetInfo 功能中的快餐栏不显示。Snackbar 在没有互联网的情况下完美显示,也从互联网开始。当 Internet 每次由 off 变为 on 时,snackbar 每次都会显示,但从 ON 变为 OFF 时不显示。所有日志在每种情况下都能完美显示。如果我放置一个警报框而不是小吃店,那么一切都很完美。
handleConnectivityChange = (isConnected) => {
NetInfo.isConnected.fetch().done((isConnected) => {
console.log('Dashboard ConnectivityChanged');
console.log('IsConnectedValue:'+ isConnected );
if(isConnected == true)
{
console.log('Dashboard Connected');
Snackbar.show({
title: 'Connected to Internet',
duration: Snackbar.LENGTH_LONG,
action: {
title: 'DISMISS',
color: 'rgb(216,21,88)',
onPress: () => { /* Dismiss snackbar default */ },
},
});
}
else
{
console.log('Dashboard No Internet');
Snackbar.show({
title: 'No Internet Connection',
duration: Snackbar.LENGTH_LONG,
action: {
title: 'DISMISS',
color: 'rgb(216,21,88)',
onPress: () => { /* Dismiss snackbar default */ },
},
});
}
});
}
解决方案
我有一个类似的问题。Tbh 我不确定是什么原因造成的,但作为临时修复将其包装在 setTimeout 中似乎可以完成这项工作,即
setTimeout(() => {
Snackbar.show({
title: 'Connected to Internet',
duration: Snackbar.LENGTH_LONG,
action: {
title: 'DISMISS',
color: 'rgb(216,21,88)',
onPress: () => { /* Dismiss snackbar default */ },
},
});
}, 1000);
此外,为了防止 Snackbar 在整个应用程序中导入和代码可重用性,请考虑将Snackbar.show()放在单独的函数中。
目前,我在整个应用程序中调用的utils.js中有这个:
export const showSnackbar = ({ title, duration = Snackbar.LENGTH_SHORT, action }) => {
Snackbar.dismiss(); // dismiss if a snackbar is still "alive"
if (!action) {
Snackbar.show({
title: message,
duration,
});
} else {
Snackbar.show({
title,
duration,
action
});
}
};
请注意,如果之前显示的小吃栏仍在屏幕上,我会在开始时将其关闭。希望这可以帮助 :)
推荐阅读
- operating-system - 使用虚拟内存时重定位的目的是什么?
- c# - 如何获取我自己创建的 USERCONTROL 的列表
- python-3.x - pygame 安装错误或未正确安装
- macos - 如何为特定部署 macOS 版本编译 OpenSSL 库?
- mongodb - 无法从由对象 ID 数组组成的子文档中删除对象 ID
- docker - 在 docker 容器控制台中获取上一个命令
- php - 如何验证数组中的两个日期是否与 Carbon 不同
- reactjs - 如何在 React Native 中播放一段 Lottie 动画(.json 文件)
- r - 为什么我的等高线图的范围这么小?
- yaml - Helm 合并和 dict 指令?