React Native | 原生IOS模块与JS通信,监听App被Kill

简介: React Native | 原生IOS模块与JS通信,监听App被Kill

一、创建原生模块

先按这个文档: React Native | 创建IOS原生模块创建一个RNGlobalManager原生模块。

网络异常,图片无法展示
|

二、编写原生模块

这里可以根据官网React Native官网 - IOS原生模块 来进行编写,我这里代码如下:

1.RNGlobalManager.h

#import <React/RCTBridgeModule.h>
#import <React/RCTEventEmitter.h>
@interface RNGlobalManager : RCTEventEmitter <RCTBridgeModule>
- (void)sendEvent:(NSString *)eventName;
@end
复制代码

2.RNGlobalManager.m

#import "RNGlobalManager.h"
#import <React/RCTLog.h>
@implementation RNGlobalManager
{
  bool hasListeners;
}
RCT_EXPORT_MODULE();
+ (id)allocWithZone:(NSZone *)zone {
  static RNGlobalManager *sharedInstance = nil;
  static dispatch_once_t onceToken;
  dispatch_once(&onceToken, ^{
    sharedInstance = [super allocWithZone:zone];
  });
  return sharedInstance;
}
- (NSArray<NSString *> *)supportedEvents
{
  return @[@"appCrashed", @"startObserving"];
}
-(void)startObserving {
  NSLog(@"RNGlobalManager startObserving");
  hasListeners = YES;
  [self sendEventWithName:@"startObserving"  body:@{@"name": @"startObserving"}];
}
-(void)stopObserving {
  NSLog(@"RNGlobalManager stopObserving");
  hasListeners = NO;
}
- (void)sendEvent:(NSString *)eventName {
   NSLog(@"RNGlobalManager sendGlobalEvent emitting event: %@", eventName);
  if (hasListeners) { 
    NSLog(@"RNGlobalManager hasListeners");
    [self sendEventWithName:@"appCrashed"  body:@{@"name": eventName}];
  }
}
@end
复制代码

三、在app life cycle里调用这个自定义模块

修改AppDelegate.mm文件

+ #import "RNGlobalManager.h"
@implementation AppDelegate
+ RNGlobalManager *globalManager = NULL;
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  RCTAppSetupPrepareApp(application);
  RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
+ globalManager = [RNGlobalManager allocWithZone: nil];
    ...
    return YES;
}
// 添加如下代码:
- (void)applicationWillTerminate:(UIApplication *)application {
    NSLog(@"========app killed==============");
    [globalManager sendEvent:@"appCrashed"];
}
复制代码

网络异常,图片无法展示
|

四、JS端监听

修改App.js文件:

import { NativeModules, NativeEventEmitter } from "react-native";
const NativeEmitter = new NativeEventEmitter(NativeModules.RNGlobalManager)
  useEffect(() => {
    initTheme();
    console.log('___________________________')
    NativeEmitter.addListener("appCrashed", (reminder) => {
      console.log('reminder______________', reminder) // 打印信息1
      onDisplayNotification1()
    })
    NativeEmitter.addListener("startObserving", (reminder) => {
      console.log('reminder_____startObserving_________', reminder)  // 打印信息2
      onDisplayNotification2()
    })
    // return () => {
    //   console.log('sss')
    //   // subscription.remove();
    // }
  }, []);
复制代码

实践结果

appCrashedstartObserving两个事件都能监听到(信息1和信息2都打印出来了),但是只有onDisplayNotification2通知发出了,即当打开app的时候会收到一个通知,但是onDisplayNotification1通知却没有收到,也就是说,当App被kill的时候事件JS监听到了,但是确没有执行后面的通知相关脚本了。

功能未实现,但是已经实现了用原生模块与JS通信问题,以及App被Kill事件监听问题。通知执行后续再战!

或许这篇文章可以给我帮助: How to run code when your app is terminated,择日再战,菇凉困了,睡觉~

相关链接


相关文章
|
10月前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
557 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
7月前
|
存储 前端开发 安全
病历单生成器在线制作,病历单生成器app,HTML+CSS+JS恶搞工具
本项目为医疗病历模拟生成器,旨在为医学教学和软件开发测试提供数据支持,严格遵守《医疗机构病历管理规定》。
|
7月前
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
3267 1
|
监控 JavaScript 前端开发
深入理解 Nuxt.js 中的 app:error 钩子
【9月更文挑战第25天】在 Nuxt.js 中,`app:error` 钩子是一个强大的工具,用于处理应用程序中的各种错误。它可以在服务器端渲染或客户端运行时触发,帮助提升应用稳定性和用户体验。通过在 `nuxt.config.js` 中定义该钩子,开发者可以实现错误页面显示、错误日志记录及错误恢复等功能,确保应用在遇到问题时能妥善处理并恢复正常运行。
225 10
|
资源调度 JavaScript Linux
【Azure 应用服务】本地Node.js部署上云(Azure App Service for Linux)遇到的三个问题解决之道
【Azure 应用服务】本地Node.js部署上云(Azure App Service for Linux)遇到的三个问题解决之道
190 1
|
11月前
|
数据采集 JavaScript Android开发
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
520 7
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
消息中间件 前端开发
React技术栈-组件间通信的2种方式
本文介绍了React技术栈中组件间通信的两种方式:通过props传递数据和使用消息发布(publish)-订阅(subscribe)机制,并通过实例代码展示了如何使用PubSubJS库实现跨组件通信。
162 11
React技术栈-组件间通信的2种方式
|
开发者 UED
深入理解 Nuxt.js 中的 app:error 钩子
【9月更文挑战第26天】在 Nuxt.js 中,钩子函数是在特定生命周期阶段执行代码的机制,`app:error` 钩子用于处理应用中的错误,包括服务器端和客户端渲染时出现的问题。它提供了一个集中处理错误的机制,提升了用户体验。当组件渲染过程中出现错误时,`app:error` 钩子会被触发,可以在 `nuxt.config.js` 文件中定义该钩子。通过分析错误对象 `err` 和上下文信息 `context`,开发者可以更好地处理各种错误情况。相比组件内的 `try/catch` 或浏览器原生错误处理,`app:error` 提供了更全局和有针对性的错误处理方式。
217 6