如何在另一个组件上运行 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() 。