Javascript React Native NetInfo'；连接更改'；未触发事件

我有两个POC正在处理。1） 恩雷斯塔皮。2） 导航

在RNRestAPI index.android.js和index.ios.js中，两者都是这样的

import React, { Component } from 'react';
import {
  AppRegistry,
  View
} from 'react-native';
import Login from './app/screens/Login/Login';
import About from './app/screens/About/About';

export default class RNRestAPI extends Component {
  render() {
    return (
      <View style={{flex:1}}>
        <Login />
      </View>
    );
  }
}

AppRegistry.registerComponent('RNRestAPI', () => RNRestAPI);

import React, { Component } from 'react';
import {
  AppRegistry,
  View,
  TextInput,
  StyleSheet,
  Button,
  Text,
  Alert,
  TouchableHighlight,
  Platform,
  Image,
  NetInfo,
  ProgressBarAndroid,
  ProgressViewIOS
} from 'react-native';
import I18n from '../../resources/strings/i18n';
import Colors from '../../resources/styles/colors';
import Dimensions from '../../resources/styles/dimensions';
import Styles from '../../resources/styles/styles';
import Config from '../../config';

export default class Login extends Component {
  constructor() {
    super();

    this.state = {
      username:'',
      password:'',
      buttonLoginDisabled:false,
      isConnected:false
    }

    // I18n.locale = 'en';
  }

  componentWillMount() {
    NetInfo.addEventListener(
      'connectionChange',
      this.handleConnectivityChange.bind(this)
    );
  }

  componentWillUnmount() {
    NetInfo.removeEventListener('connectionChange', handleConnectivityChange);
  }

  handleConnectivityChange(connectionInfo) {
    console.log('First change, type: ' + connectionInfo.type + ', effectiveType: ' + connectionInfo.effectiveType);

    if(connectionInfo.type === 'none') {
      this.setState({
        isConnected:false,
        buttonLoginDisabled:true
      });
    } else {
      this.setState({
        isConnected:true,
        buttonLoginDisabled:false
      });
    }
  }

  onLoginClicked() {
    var valid = this.validateLoginForm();

    if(valid === true) {
      this.setState({
        buttonLoginDisabled:true
      });

      this.makeLoginRequest();
    } else {
      Alert.alert(I18n.t('dialogLoginInvalidTitle'), I18n.t('dialogLoginInvalidMessage'));
    }
  }

  validateLoginForm() {
    if(this.state.username === '') {
      return false;
    }

    if(this.state.password === '') {
      return false;
    }

    return true;
  }

  makeLoginRequest() {
    fetch('http://webapitest', {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
        'MobilePlatformId': Config.MobilePlatformId,
        'ApplicationId': Config.ApplicationId,
        'Version': '1.9.6'
      },
      body: JSON.stringify({
        Username: this.state.username,
        Password: this.state.password
      })
    })
    .then((response) => response.json())
    .then((responseJson) => {
      console.log(responseJson);

      if(responseJson.Token !== null) {
        console.log('login successful');
      } else {
        this.setState({
          buttonLoginDisabled:false
        });

        Alert.alert(I18n.t('dialogInvalidLoginTitle'), I18n.t('dialogInvalidLoginMesage'));
      }
    })
    .catch((error) => {
      console.log(eror);

      this.setState({
        buttonLoginDisabled:false
      });
    })
  }

  setUsername(value) {
    this.setState({
      username:value
    });
  }

  setPassword(value) {
    this.setState({
      password:value
    });
  }

  onMoreClicked() {
    Alert.alert(I18n.t('dialogLearnMoreTitle'), I18n.t('dialogLearnMoreMesage'));
  }

  getLoginButtonStyle() {
    if(this.state.buttonLoginDisabled) {
      return styles.buttonLoginDisabled;
    } else {
      return styles.buttonLogin;
    }
  }

  render() {
    return (
      <View style={styles.container}>
        <View>
          <Image source={require('../../resources/images/facilit_logo_welcome.png')}
            style={{width:266, height:50, resizeMode:Image.resizeMode.cover}} />
        </View>
        <View style={styles.wrapperLoginInput}>
          <TextInput
            keyboardType='default' 
            placeholder={I18n.t('username')} 
            returnKeyType='next' 
            onChangeText={(value) => this.setUsername(value)}
            style={Styles.primaryTextInput} />

          <TextInput secureTextEntry={true} 
            placeholder={I18n.t('password')}
            onChangeText={(value) => this.setPassword(value)}
            style={Styles.primaryTextInput} />

          <TouchableHighlight onPress={this.onLoginClicked.bind(this)}
            style={{marginTop:(Platform.OS === 'ios') ? 10 : 30}}
            underlayColor='#00000000'
            disabled={this.state.buttonLoginDisabled}>
            <View style={this.getLoginButtonStyle()}>
              <Text style={styles.buttonLoginText}>{I18n.t('login')}</Text>
            </View>
          </TouchableHighlight>


          <View style={styles.wrapperLearnMoreLink}>
            <TouchableHighlight onPress={this.onMoreClicked.bind(this)}
              underlayColor='#00000000'>
              <Text style={styles.learnMoreLink}>{I18n.t('learnMore')}</Text>
            </TouchableHighlight>
          </View>
        </View>
      </View> 
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex:1,
    backgroundColor:Colors.primaryBlue,
    justifyContent:'center',
    alignItems:'center'
  },
  wrapperLoginInput: {
    width:300,
    marginTop:100
  },
  buttonLogin: {
    backgroundColor:Colors.primaryYellow,
    alignItems:'center',
    height:Dimensions.primaryButtonHeight,
    justifyContent:'center',
    borderRadius:Dimensions.primaryButtonBorderRadius,
    borderWidth:Dimensions.primaryButtonBorderWidth,
    borderColor:Colors.primaryButtonBorderColor,
  },
  buttonLoginDisabled: {
    backgroundColor:Colors.primaryButtonDisabledGray,
    alignItems:'center',
    height:Dimensions.primaryButtonHeight,
    justifyContent:'center',
    borderRadius:Dimensions.primaryButtonBorderRadius,
    borderWidth:Dimensions.primaryButtonBorderWidth,
    borderColor:Dimensions.primaryButtonBorderColor,
  },
  buttonLoginText: {
    fontSize:Dimensions.primaryButtonFontSize,
    color:Colors.primaryButtonFontColor
  },
  wrapperLearnMoreLink: {
    alignItems:'center',
    marginTop:150,
  },
  learnMoreLink: {
    color:Colors.secondaryTextColor,
    textDecorationLine:'underline'
  }
});

AppRegistry.registerComponent('Login', () => Login);

2） 将index.android.js和index.ios.js修改为

import './App.js';

---

Login.js未被触及。但是不再触发

connectionChange

事件。非常感谢任何专家的帮助，指导我找出它不再被触发的原因，或者教育我是否在使用React Navigate时出错。

对于我来说，事件没有被触发是因为我在

AndroidManifest.xml

中添加

后没有重新启动React本机服务器

---

杀死你的服务器，然后重新启动它，然后它就会启动。

嘿，你找到解决办法了吗？我正在使用react导航，自从我问了这个问题后，连接的更改就没有发生太多，我甚至记不起在这里问过这个问题。我在RN方面已经取得了长足的进步，我必须挖掘我的旧学习档案，看看这是怎么回事。如果我在相当长的一段时间内没有回来，请提醒我。别担心。我只是（我是说，刚才）发现了我的错误。我将事件附加到属性（NetInfo.isConnected.addEventListener wut？）中，因此，谢谢！

import './App.js';