React Native网络监听报错及Snackbar显示逻辑优化求助

问题1：TS报错 Property 'remove' does not exist in type 'NetInfoSubscription' #

• 原因：NetInfo.addEventListener 返回的是一个取消订阅函数，而非带有remove方法的对象。
• 修复：将 return () => unsubscribe.remove(); 改为 return () => unsubscribe();

问题2：App启动时Snackbar自动显示，仅需状态变化时弹出 #

• 核心思路：
  • 用useRef保存上一次的网络状态，避免启动时触发状态变化判断
  • 仅当当前网络状态与上一次状态不一致时，才触发Snackbar显示
  • 初始获取网络状态时不触发Snackbar

完整优化代码 #

import { useState, useEffect, useRef } from 'react';
import NetInfo from '@react-native-community/netinfo';
import Snackbar from '你的Snackbar组件路径';

const NetworkMonitor = () => {
  const [isNetwork, setIsNetwork] = useState(true);
  const [isChangeNetwork, setIsChangeNetwork] = useState(false);
  // 用useRef保存上一次网络状态，避免启动时触发提示
  const previousNetworkState = useRef<boolean | null>(null);

  useEffect(() => {
    // 初始获取网络状态，仅更新状态，不触发Snackbar
    NetInfo.fetch().then(({ isConnected, isInternetReachable }) => {
      const currentState = isConnected && isInternetReachable;
      setIsNetwork(currentState);
      previousNetworkState.current = currentState; // 初始化上一次状态
    });

    const unsubscribe = NetInfo.addEventListener(({ isConnected, isInternetReachable }) => {
      const currentState = isConnected && isInternetReachable;
      // 仅当当前状态与上一次状态不同时，才触发Snackbar
      if (currentState !== previousNetworkState.current) {
        setIsNetwork(currentState);
        setIsChangeNetwork(true);
        previousNetworkState.current = currentState; // 更新上一次状态
      }
    });

    // 修复TS报错：直接调用取消订阅函数
    return () => unsubscribe();
  }, []);

  return (
    <Snackbar
      visible={isChangeNetwork}
      onDismiss={() => setIsChangeNetwork(false)}
      duration={3000}
      theme={{ colors: { inverseSurface: isNetwork ? 'green' : 'red' } }}
    >
      {isNetwork ? "已连接网络" : "网络已断开"}
    </Snackbar>
  );
};

export default NetworkMonitor;

关键改动说明 #

1. 修复TS报错：直接调用unsubscribe()完成订阅取消，符合NetInfo的API规范
2. 状态变化判断：通过useRef存储历史网络状态，只有当当前状态与历史状态不一致时，才触发Snackbar的显示逻辑
3. 初始状态处理：首次获取网络状态时仅更新状态值，不触发Snackbar，解决启动时自动弹出的问题

内容的提问来源于stack exchange，提问作者Paul