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

相关链接


相关文章
|
3月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
783 1
|
3天前
|
存储 监控 API
app开发之安卓Android+苹果ios打包所有权限对应解释列表【长期更新】-以及默认打包自动添加权限列表和简化后的基本打包权限列表以uniapp为例-优雅草央千澈
app开发之安卓Android+苹果ios打包所有权限对应解释列表【长期更新】-以及默认打包自动添加权限列表和简化后的基本打包权限列表以uniapp为例-优雅草央千澈
|
2月前
|
前端开发 JavaScript 测试技术
React 中集成 Chart.js 图表库
本文介绍了如何在 React 项目中集成 Chart.js 创建动态图表,涵盖基础概念、安装步骤、代码示例及常见问题解决方法,帮助开发者轻松实现数据可视化。
46 11
|
2月前
|
传感器 iOS开发 UED
探索iOS生态系统:从App Store优化到用户体验提升
本文旨在深入探讨iOS生态系统的多个方面,特别是如何通过App Store优化(ASO)和改进用户体验来提升应用的市场表现。不同于常规摘要仅概述文章内容的方式,我们将直接进入主题,首先介绍ASO的重要性及其对开发者的意义;接着分析当前iOS平台上用户行为的变化趋势以及这些变化如何影响应用程序的设计思路;最后提出几点实用建议帮助开发者更好地适应市场环境,增强自身竞争力。
|
2月前
|
监控 前端开发 JavaScript
React 静态网站生成工具 Next.js 入门指南
【10月更文挑战第20天】Next.js 是一个基于 React 的服务器端渲染框架,由 Vercel 开发。本文从基础概念出发,逐步探讨 Next.js 的常见问题、易错点及解决方法,并通过具体代码示例进行说明,帮助开发者快速构建高性能的 Web 应用。
100 10
|
2月前
|
资源调度 前端开发 数据可视化
构建高效的数据可视化仪表板:D3.js与React的融合之道
【10月更文挑战第25天】在数据驱动的时代,将复杂的数据集转换为直观、互动式的可视化表示已成为一项至关重要的技能。本文深入探讨了如何结合D3.js的强大可视化功能和React框架的响应式特性来构建高效、动态的数据可视化仪表板。文章首先介绍了D3.js和React的基础知识,然后通过一个实际的项目案例,详细阐述了如何将两者结合使用,并提供了实用的代码示例。无论你是数据科学家、前端开发者还是可视化爱好者,这篇文章都将为你提供宝贵的洞见和实用技能。
70 5
|
2月前
|
JavaScript 前端开发 开发者
JavaScript框架React vs. Vue:一场性能与易用性的较量
JavaScript框架React vs. Vue:一场性能与易用性的较量
40 0
|
3月前
|
缓存 JSON JavaScript
Node.js模块系统
10月更文挑战第4天
51 2
|
3月前
|
JavaScript 前端开发
前端js,vue系统使用iframe嵌入第三方系统的父子系统的通信
前端js,vue系统使用iframe嵌入第三方系统的父子系统的通信
|
3月前
|
JavaScript 应用服务中间件 Apache
Node.js Web 模块
10月更文挑战第7天
36 0