当 Internet 连接从 ON 更改为 OFF 时，Snackbar 不显示答案

【问题标题】：Snackbar is not shown when internet connection is changed from ON to OFF当 Internet 连接从 ON 更改为 OFF 时，Snackbar 不显示
【发布时间】：2019-11-05 21:33:06
【问题描述】：

我使用 NetInfo 库来检测 Internet 连接是否可用。它工作得很好，但是当 Internet 从打开更改为关闭时，NetInfo 功能中的快餐栏不显示。 Snackbar 在没有互联网的情况下完美显示，也从互联网开始。当 Internet 每次从关闭更改为打开时，每次都会显示小吃店，但从打开更改为关闭时不显示。所有日志在每种情况下都能完美显示。如果我放置一个警报框而不是小吃店，那么一切都很完美。

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 */ },
          },
        });
    }
  });
}

【问题讨论】：

当小吃店不可见时，该功能的日志是否正常显示？
是的，所有日志都完美显示。
您是否使用 expo 客户端运行您的应用程序？
不，我正在使用我的手机。

标签： javascript react-native snackbar react-native-community-netinfo

【解决方案1】：

我遇到了类似的问题。 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
    });
  }
};

请注意，如果之前显示的小吃栏仍在屏幕上，我会在开始时将其关闭。希望这会有所帮助:)

【讨论】：