Question

我尝试为我的应用制作网络可用性组件。我在network.js中的生命周期组件

import { Component } from 'react';
import { NetInfo } from 'react-native';

export default class Network extends Component {
  constructor(props) {
      super(props);
      this.state = { connected: null }
  }

  componentWillMount() {
      NetInfo.isConnected.addEventListener('connectionChange', this.handleConnectionChange);
      NetInfo.isConnected.fetch().done((isConnected) => this.setState({ connected: isConnected }))
  }

  componentWillUnmount() {
      NetInfo.isConnected.removeEventListener('connectionChange', this.handleConnectionChange);
  }

  handleConnectionChange = (isConnected) => { this.setState({ connected: isConnected }) }

  situation() {
    if(this.state.connected)
      return true
    else 
      return false  
  }
}

我的主页：

import React, { Component } from 'react';
import { View, I18nManager, StatusBar, StyleSheet, Text } from 'react-native';
import { Spinner } from 'native-base';
import Network from './Network'

export default class Intro extends Component {
  constructor() {
      super();
      I18nManager.allowRTL(true);
      I18nManager.forceRTL(true);
  }

  render() {
    var network = new Network;    
    alert(network.situation())

    if (network==true) {
      alert('online')
    else
      alert('offline')
  }
}

但是执行后，componentWillMount和componentWillUnmount无法正常工作。

Answer 1

实际上不需要制作React组件来检查网络连接实用程序。您可以像这样创建一个简单的Network类，并在应用程序组件的生命周期中对其进行初始化/取消初始化。从'react-native'导入{NetInfo};

const NET_INFO = {};
let instance;

export default class Network {
   static getInstance() {
      return instance || new Network();
   }

   static initialize() {
      NetInfo.isConnected.addEventListener('connectionChange', Network.getInstance().handleConnectionChange);
   }

   static deinitialize() {
      NetInfo.isConnected.removeEventListener('connectionChange', Network.getInstance().handleConnectionChange);
   }

   handleConnectionChange = (isConnected) => { 
      NET_INFO.isConnected = isConnected;
   }

   static isInternetConnected() {
      return NET_INFO.isConnected;
   }
}

应用程序组件：

import React, { Component } from 'react';
import Network from './Network'

export default class Intro extends Component {

   componentWillMount() {
      Network.initialize();
   }

   componentWillUnmount() {
      Network.deinitialize();
   }

   render() {  
     const connected = Network.isInternetConnected()
     if (connected ==true)
        alert('online')
     else
        alert('offline')
   }
}

Answer 2

因为您不是将Network类用作组件，而是作为普通类使用。

如果要运行生命周期方法，则需要将其用作组件。

就像在render方法中一样

<Network />

如果您想在父项中执行任何操作以进行网络更改，请使用prop函数。

就像在render方法中一样

<Network
   connectivityChange={()=>{
     //do your stuffs here
   }}
/>

要在父级中执行某项操作时，需要在网络组件中调用this.props.connectivityChange()。

如何在另一个组件上运行React Native生命周期

2 个答案: