如何让 NetInfo 与 expo-web 一起工作？

Posted 2023-02-19

【中文标题】如何让 NetInfo 与 expo-web 一起工作？

【英文标题】：How to get NetInfo working with expo-web?

【发布时间】：2020-08-12 12:44:05

【问题描述】：

我尝试使用 expo 文档中的 NetInfo 示例：https://docs.expo.io/versions/latest/sdk/netinfo/

当我为 web 编译时，编译失败并显示

TypeError: NetInfo.addEventListener is not a function
(anonymous function)
..components/OfflineFullScreen.jsx:22

  21 | 
> 22 |    const unsubscribe = NetInfo.addEventListener((state) => 
     | ^  23 |      console.log('Connection type', state.type);
  24 |      console.log('Is connected?', state.isConnected);
  25 |    );

即使文档声明应该支持它。

我的屏幕是这样的：

import React,  useEffect, useState  from 'react';
import 
  View, Text, StyleSheet, ActivityIndicator,
 from 'react-native';
// import NetInfo from '@react-native-community/netinfo';
import * as NetInfo from '@react-native-community/netinfo';

const OfflineNotice = () => 
  const [connected, setConnected] = useState(true);


  useEffect(() => 

    /* const unsubscribe = NetInfo.addEventListener((state) => 
      if (state.isConnected) 
        setConnected(true);
       else 
        setConnected(false);
      
    ); */

    const unsubscribe = NetInfo.addEventListener((state) => 
      console.log('Connection type', state.type);
      console.log('Is connected?', state.isConnected);
    );

    return unsubscribe();
  , []);

  if (!connected)  // if not connected return an full sized overlay
    return (
      <View style=styles.offlineContainer>
        <ActivityIndicator size="large" color="darkorange" />
        <Text style=styles.offlineText>No Internet Connection</Text>
        <Text style=styles.offlineText>Trying to reconnect ...</Text>
      </View>
    );
  
  return null;
;

const styles = StyleSheet.create(
  offlineContainer: 
    alignItems: 'center',
    justifyContent: 'center',
    position: 'absolute',
    position: 'absolute',
    left: 0,
    top: 0,
    opacity: 0.85,
    backgroundColor: 'black',
    width: '100%',
    height: '100%',
    zIndex: 100,
  ,
  offlineText: 
    color: '#fff',
    marginTop: '3%',
  ,
);

export default OfflineNotice;

知道我做错了什么吗？这可能是一个错误，因为 expo-web 仍处于测试阶段？

我正在使用 Expo SDK 37，@react-native-community/netinfo@4.6.0，

【参考方案1】：

在 React Native Web 中使用了过时的 Netinfo 版本。这可以通过添加如下代码的 polyfill 来解决。

import  useEffect, useState, useCallback  from 'react';
import  Platform  from 'react-native';
import NetInfo from 'react-native-web/dist/exports/NetInfo';

function useOldNetInfo() 
  const [netInfo, setNetInfo] = useState<NetInfo.NetInfoState>();
  const [isConnected, setIsConnected] = useState<boolean>(true);

  const onInfo = useCallback((data) => 
    setNetInfo( ...data, isConnected );
  , [isConnected]);

  useEffect(() => 
    NetInfo.getConnectionInfo().then(onInfo);
    NetInfo.isConnected.fetch().then(setIsConnected);
    return NetInfo.addEventListener('connectionChange', onInfo).remove;
  , [onInfo]);

  return netInfo;


export default Platform.select(
  web: useOldNetInfo,
  ios: CommunityNetInfo.useNetInfo,
  android: CommunityNetInfo.useNetInfo,
);

Github 问题： https://github.com/expo/expo/issues/8070