react-native - 使用 NetINFO 响应 native 检查互联网连接

Question

我在我的 react-native v0.49 应用程序上实现了检查互联网。
我正在使用 react-native 的 NetInfo。
当发生任何更改时，我添加 eventListener 它将调用函数。
但是当我在模拟器和真实设备中测试它时，我只得到第一个更改，但是如果我与 Wifi 断开连接，我看不到任何更改。

互联网连接弹出窗口

    import React, { Component } from 'react';
import {
    View,
    Text,
    NetInfo
} from 'react-native';

// styles
import { style } from './style';
import { globalStyle } from '../../assets/styles/globalStyle';

// redux
import {connect} from 'react-redux';
import * as actions from '../../actions';

class InternetConnectionPopUp extends Component {
    constructor(props){
        super(props);
        this.state = { 
            connectionInfo : ''

         }
         this.handleFirstConnectivityChange = this.handleFirstConnectivityChange.bind(this);

    }  
    handleFirstConnectivityChange(connectionInfo) {
        this.setState({
            connectionInfo: connectionInfo.type
        })
        console.log('First change, type: ' + connectionInfo.type + ', effectiveType: ' + connectionInfo.effectiveType);

      }

    componentWillMount () {
        NetInfo.getConnectionInfo().then((connectionInfo) => {
            this.setState({
                connectionInfo: connectionInfo.type
            })
            //console.log('Initial, type: ' + connectionInfo.type + ', effectiveType: ' + connectionInfo.effectiveType);
          });

          NetInfo.addEventListener(
            'connectionChange',
            this.handleFirstConnectivityChange
          );
    }
    componentWillUnmount() {
        NetInfo.removeEventListener(
            'connectionChange',
            handleFirstConnectivityChange
          );
    }




    render() {


        return (
            <View>
                <Text> ComponentName component </Text>
                <Text> { this.state.connectionInfo } </Text>
            </View>    
        );
    }
}


export default InternetConnectionPopUp;

Answer 1

我可以重现你的错误，它对我来说改变了 componentWillMount至 componentDidMount .我认为 React 在调用 this.setState 时遇到了内部错误因为组件还没有安装(所以它可以重新渲染任何东西)。

希望能帮助到你 :)