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

Question

我试图为我的应用程序制作一个网络可用性组件。我在网络中的生命周期组件.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 />

如果你想在父级中执行任何内容以进行网络更改，请使用 prop 函数。

就像渲染方法中的这样，

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

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