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

Question

I tried to make a network availability component for my app. My lifecycle component in the 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  
  }
}

And my main page :

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')
  }
}

But after execution, componentWillMount and componentWillUnmount are not working.

Answer 1

There is really no need to make React component for checking Network connection utility. You can just create a simple Network class like this and initialize/deinitialize it from your app component's lifecycles. import { NetInfo } from 'react-native';

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;
   }
}

App component:

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

Because you are not using Network class as component but as a normal class.

If you want to run life-cycle methods then you need use it as Component.

like this in render method,

<Network />

and if you want to execute anything in parent for network change then use prop functions.

like this in render method,

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

you need to call this.props.connectivityChange() in Network component when you want do something in parent.