NetINFOとのネイティブチェックインターネット接続

Question

私の反応ネイティブv0.49アプリでインターネットをチェックして実装します。 私は反応ネイティブのNetInfoを使用しています。 変更が発生したときにeventListenerを追加して、関数を呼び出します。 しかし、私はエミュレータと実際のデバイスでそれをテストするとき、私は最初の変更を得るだけですが、私がWifiから切断すると、私は何の変化も見ません。

internetConnectionPopUp

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

私はあなたのエラーを再現することができ、それは私がcomponentDidMountへcomponentWillMountを変えるために働きます。 Reactは、コンポーネントがまだマウントされていないので（何かを再レンダリングできるので）this.setStateという内部エラーが発生していると思います。

希望します。