如何在另一個組件上運行 React Native 生命周期

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 類用作組件，而是將其用作普通類。

如果要運行生命周期方法，則需要將其用作組件。

像這樣在渲染方法中，

<Network />

如果您想在父級中執行任何網絡更改，請使用 prop 函數。

像這樣在渲染方法中，

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

當您想在父組件中執行某些操作時，您需要在 Network 組件中調用this.props.connectivityChange() 。