当应用程序未使用或处于后台模式时，React Native 是不是有函数生命周期正在运行？

Posted 2023-02-24

【中文标题】当应用程序未使用或处于后台模式时，React Native 是不是有函数生命周期正在运行？

【英文标题】：Does react native have a function lifecycle is running when app is not use or in background mode?当应用程序未使用或处于后台模式时，React Native 是否有函数生命周期正在运行？

【发布时间】：2018-05-30 07:40:19

【问题描述】：

当应用不使用或处于后台模式时，React Native 是否有函数生命周期正在运行？

当用户不使用应用程序或后台模式下的应用程序时，我需要 react-native 中的函数生命周期正在工作。我想检查数据库以获取通知 componentDidMount 是否正常，但用户必须打开应用程序并再次关闭它

我需要一个函数或生命周期一直在工作

这是我的通知代码：

import React,  Component  from 'react';
import  View, NetInfo, Image, AppState, DeviceEventEmitter  from 'react-native';
import  Container, Text  from 'native-base';
import  RootNavigator  from './src/root';
import  Provider  from 'react-redux';
import  createStore  from 'redux';
import resducers from './src/reducers/index';
import PushController from'./PushController';
import PushNotification from 'react-native-push-notification';
import PushNotificationandroid from 'react-native-push-notification';

const store = createStore(resducers);

export default class App extends Component<Props> 
  constructor(Props)
    super(Props);
    this.state=
      connection:null,
    
    this.handleAppStateChange = this.handleAppStateChange.bind(this);
    this.sendNotification = this.sendNotification.bind(this);
  

  componentDidMount()
    AppState.addEventListener('change',this.handleAppStateChange);
  

  componentWillMount()
    NetInfo.isConnected.addEventListener("connectionChange",this.handleConnectionChange);
    NetInfo.isConnected.fetch().done((isConnected)=>this.setState(connection:isConnected));

    PushNotificationAndroid.registerNotificationActions(['Accept','Reject','Yes','No']);
    DeviceEventEmitter.addListener('notificationActionReceived', function(e)
      console.log ('notificationActionReceived event received: ' + e);
      const info = JSON.parse(e.dataJSON);
      if (info.action == 'Yes') 
        alert('Accept');
       else if (info.action == 'No') 
        alert('Reject')
      
      // Add all the required actions handlers
    );
  

  componentWillUnMount()
    NetInfo.isConnected.removeEventListener("connectionChange",this.handleConnectionChange);
    AppState.removeEventListener('change',this.handleAppStateChange);
  

  handleConnectionChange=(isConnected)=>
    this.setState(connection:isConnected);
  

  handleAppStateChange(appState)
    if(appState==='background')
      PushNotification.localNotificationSchedule(
        message:'Scheduled notification delay message',
        date:new Date(Date.now()+(2000))
      )
    
  
  sendNotification()
    PushNotification.localNotification(
      message:'You Pushed the notification button',
      title:'My Notification Title',
      ongoing:true,
      vibrate:true,
      playSound:true,
      actions:'["Yes","No"]',
      color:'red'
    )
  

  handeView()
    if(this.state.connection!==null && this.state.connection)
      return <RootNavigator />
    else 
      return <View style=flex:1, alignItems:"center", justifyContent:"center">
         <Image source=require("./images/connection.gif") style=height: 150, width: 150, resizeMode : "stretch"/>
         <Text style= fontFamily:"IRANSans", fontSize:18, textAlign:"center", color:"#b0b5bb" >لطفا اتصال اینترنت خود را بررسی کنید ...</Text>
      </View>
    
  

  render() 
    return (
      <Provider store=store>
         <Container>
             this.handeView()
             this.sendNotification()
         </Container>
      </Provider>
    );
  

【问题讨论】：

javascript 代码不能在后台运行，所以如果你想要后台处理，你需要为 ios 和 Android 创建一个原生模块

【参考方案1】：

正如@dentemm 提到的，这需要在本机代码中运行，因此您可以尝试使用此模块https://github.com/jamesisaac/react-native-background-task

注意：对于通知，我们通常使用外部服务向用户推送通知，例如 Firebase、Amazone SNS 或 Google Cloud Messages，即使您的应用完全关闭，通知也会到达用户，因为操作系统将处理通知，并在用户点击它时打开您的应用并为您运行一个功能，有关更多详细信息，您可以查看本教程https://medium.com/differential/how-to-setup-push-notifications-in-react-native-ios-android-30ea0131355e