如何实现NetInfo来检查不同屏幕之间的网络连接

Question

我附加了一个名为ConnectionChecker的组件的片段，我已经将其包裹在所有屏幕导航中。我使用NetInfo检查连接检查器组件中的互联网连接，检查所有屏幕的连接。但是，即使我使用了NetInfo.addEventListner，网络连接也没有更新。以下仅适用于一个屏幕。但是，当我将组件封装在Drawer Stack上时，它没有正确更新NetInfo变量，我通过该变量检查网络连接。

import NetInfo, { useNetInfo } from '@react-native-community/netinfo';
import React from 'react';
import NoInternetScreen from './NoInternetScreen';
const ConnectionChecker = ({ children }: { children: any }) => {
const netInfo = useNetInfo();
console.log('NetInfo is: ', netInfo.isConnected);
console.log('NetInfo type: ', netInfo.type);
return netInfo.isConnected ? (
children
) : (
<>
<NoInternetScreen />
</>
);
};
export default ConnectionChecker;

Answer 1

您可以创建外部函数以在任何地方使用，如下所示；

import NetInfo from "@react-native-community/netinfo";
export function isConnected() {
return new Promise((resolve, reject) => {
NetInfo.fetch().then(state => {
console.log("Connection type", state.type);
console.log("Is connected?", state.isConnected);
if (state.isConnected) {
resolve();
}
else {
reject();
}
});
})
}

然后，你可以这样称呼它：

isConnected()
.then(() => console.log("has internet connection"))
.catch(() => console.log("no connection"))

因此，您可以将连接检查方法导入到所需的屏幕、组件中。