我正在构建一个小组件,该组件将显示一个红色条带,上面写着“无连接”。当我关闭 wifi 时它工作正常,横幅显示正常。当我重新打开 wifi 时,NetInfo 似乎没有收到该事件,因此横幅保持在原来的位置。
打开 wifi 时控制台日志不打印任何内容,因此我假设 netinfo 没有更新。
这是我的 OfflineNotice 组件:
import React, {useState, useEffect} from 'react';
import {View, StyleSheet, Dimensions, Text} from 'react-native';
import NetInfo from '@react-native-community/netinfo';
const {width} = Dimensions.get('window');
const OfflineNotice = () => {
const [connected, setConnected] = useState(true);
useEffect(() => {
NetInfo.addEventListener((state) => {
console.log(state);
setConnected(state.isInternetReachable);
});
}, []);
return (
<View>
{!connected && (
<View style={styles.offlineContainer}>
<Text style={styles.offlineText}>No Internet Connection</Text>
</View>
)}
</View>
);
};
const styles = StyleSheet.create({
offlineContainer: {
backgroundColor: '#b52424',
height: 30,
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'row',
width,
position: 'absolute',
top: 30,
},
offlineText: {
color: '#fff',
},
});
export default OfflineNotice;