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,择日再战,菇凉困了,睡觉~

相关链接


相关文章
|
8天前
|
人工智能 搜索推荐 数据挖掘
原生鸿蒙版小艺APP接入DeepSeek-R1,为HarmonyOS应用开发注入新活力
原生鸿蒙版小艺APP成功接入DeepSeek-R1,为HarmonyOS用户带来更智能高效的交互体验。通过此次升级,用户在编程、学习和工作中的问题可迅速获得专业解答。同时,此举为HarmonyOS应用开发者提供了新的技术参考,激发了更多创新应用场景的开发,助力打造差异化竞争优势,推动HarmonyOS生态繁荣发展。
135 68
原生鸿蒙版小艺APP接入DeepSeek-R1,为HarmonyOS应用开发注入新活力
|
4天前
|
数据采集 JavaScript Android开发
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
29 7
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
4月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
930 1
|
5月前
|
监控 JavaScript 前端开发
深入理解 Nuxt.js 中的 app:error 钩子
【9月更文挑战第25天】在 Nuxt.js 中,`app:error` 钩子是一个强大的工具,用于处理应用程序中的各种错误。它可以在服务器端渲染或客户端运行时触发,帮助提升应用稳定性和用户体验。通过在 `nuxt.config.js` 中定义该钩子,开发者可以实现错误页面显示、错误日志记录及错误恢复等功能,确保应用在遇到问题时能妥善处理并恢复正常运行。
73 10
|
28天前
|
JavaScript 前端开发 测试技术
盘点原生JavaScript中直接触发事件的方式
本文全面探讨了原生JavaScript中触发事件的多种方式,包括`dispatchEvent`、`Event`构造函数、`CustomEvent`构造器、直接调用事件处理器以及过时的`createEvent`和`initEvent`方法。通过技术案例分析,如模拟点击事件、派发自定义数据加载事件和实现提示框系统,帮助开发者掌握这些方法在实际开发中的应用,提升灵活性与兼容性。
35 3
|
4月前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
1731 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
5月前
|
开发者 UED
深入理解 Nuxt.js 中的 app:error 钩子
【9月更文挑战第26天】在 Nuxt.js 中,钩子函数是在特定生命周期阶段执行代码的机制,`app:error` 钩子用于处理应用中的错误,包括服务器端和客户端渲染时出现的问题。它提供了一个集中处理错误的机制,提升了用户体验。当组件渲染过程中出现错误时,`app:error` 钩子会被触发,可以在 `nuxt.config.js` 文件中定义该钩子。通过分析错误对象 `err` 和上下文信息 `context`,开发者可以更好地处理各种错误情况。相比组件内的 `try/catch` 或浏览器原生错误处理,`app:error` 提供了更全局和有针对性的错误处理方式。
|
5月前
|
移动开发 前端开发 JavaScript
原生JavaScript+canvas实现五子棋游戏_值得一看
本文介绍了如何使用原生JavaScript和HTML5的Canvas API实现五子棋游戏,包括棋盘的绘制、棋子的生成和落子、以及判断胜负的逻辑,提供了详细的代码和注释。
75 0
原生JavaScript+canvas实现五子棋游戏_值得一看
|
11天前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
141 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
27天前
|
Dart 前端开发
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
116 75
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈

热门文章

最新文章