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

相关链接


相关文章
|
2月前
|
JavaScript
在 Vue.js 中使用 watch 来监听对象属性的变化
在 Vue.js 中使用 watch 来监听对象属性的变化
|
18天前
|
JavaScript API
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
45 0
|
27天前
|
JavaScript 前端开发 API
JavaScript全屏,监听页面是否全屏
JavaScript全屏,监听页面是否全屏
45 0
|
2月前
|
前端开发 JavaScript
React的事件与原生事件的执行顺序?
React的事件与原生事件的执行顺序?
|
3月前
|
存储 JavaScript 前端开发
探索React状态管理:Redux的严格与功能、MobX的简洁与直观、Context API的原生与易用——详细对比及应用案例分析
【8月更文挑战第31天】在React开发中,状态管理对于构建大型应用至关重要。本文将探讨三种主流状态管理方案:Redux、MobX和Context API。Redux采用单一存储模型,提供预测性状态更新;MobX利用装饰器语法,使状态修改更直观;Context API则允许跨组件状态共享,无需第三方库。每种方案各具特色,适用于不同场景,选择合适的工具能让React应用更加高效有序。
72 0
|
3月前
|
JavaScript 前端开发 API
js全屏,监听页面是否全屏
js全屏,监听页面是否全屏
62 4
|
3月前
|
iOS开发
App备案与iOS云管理式证书 ,公钥及证书SHA-1指纹的获取方法
App备案与iOS云管理式证书 ,公钥及证书SHA-1指纹的获取方法
175 0
App备案与iOS云管理式证书 ,公钥及证书SHA-1指纹的获取方法
|
3月前
|
Android开发 iOS开发 C#
Xamarin:用C#打造跨平台移动应用的终极利器——从零开始构建你的第一个iOS与Android通用App,体验前所未有的高效与便捷开发之旅
【8月更文挑战第31天】Xamarin 是一个强大的框架,允许开发者使用单一的 C# 代码库构建高性能的原生移动应用,支持 iOS、Android 和 Windows 平台。作为微软的一部分,Xamarin 充分利用了 .NET 框架的强大功能,提供了丰富的 API 和工具集,简化了跨平台移动应用开发。本文通过一个简单的示例应用介绍了如何使用 Xamarin.Forms 快速创建跨平台应用,包括设置开发环境、定义用户界面和实现按钮点击事件处理逻辑。这个示例展示了 Xamarin.Forms 的基本功能,帮助开发者提高开发效率并实现一致的用户体验。
139 0
|
3月前
|
开发框架 .NET Linux
【Azure 应用服务】 部署到App Service for Linux 服务的Docker 镜像,如何配置监听端口呢?
【Azure 应用服务】 部署到App Service for Linux 服务的Docker 镜像,如何配置监听端口呢?
|
3月前
|
iOS开发
解决IOS上架App Store后显示语言为英文的问题
解决IOS上架App Store后显示语言为英文的问题
79 0