首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在静默状态下侦听react原生firebase消息时出现错误hermes startHeadlessTask react native 0.63

在React Native中使用Firebase进行消息推送时,如果你遇到与Hermes引擎相关的错误,特别是在静默状态下侦听消息时,可能需要进行一些配置和调整。以下是一些常见的解决方法和步骤:

1. 确保Hermes引擎已正确启用

首先,确保你的React Native项目已正确启用了Hermes引擎。你可以在android/app/build.gradle文件中检查以下配置:

代码语言:javascript
复制
project.ext.react = [
    enableHermes: true  // 这里设置为true以启用Hermes
]

2. 配置Headless JS任务

在React Native中,处理后台任务(如静默推送通知)需要使用Headless JS。确保你已正确配置了Headless JS任务。

创建Headless JS任务

在你的项目中创建一个文件,例如HeadlessTask.js,并定义你的任务:

代码语言:javascript
复制
// HeadlessTask.js
import { AppRegistry } from 'react-native';
import messaging from '@react-native-firebase/messaging';

const headlessTask = async (message) => {
  // 处理消息
  console.log('Message handled in the background!', message);
  // 返回Promise以通知任务已完成
  return Promise.resolve();
};

// 注册任务
AppRegistry.registerHeadlessTask('RNFirebaseBackgroundMessage', () => headlessTask);

注册Headless JS任务

在你的index.jsApp.js文件中注册Headless JS任务:

代码语言:javascript
复制
import { AppRegistry } from 'react-native';
import App from './App';
import messaging from '@react-native-firebase/messaging';
import './HeadlessTask';  // 导入HeadlessTask.js

AppRegistry.registerComponent('YourAppName', () => App);

// 注册后台消息处理
messaging().setBackgroundMessageHandler(async (remoteMessage) => {
  console.log('Message handled in the background!', remoteMessage);
});

3. 确保Firebase配置正确

确保你已正确配置了Firebase,包括在android/app/google-services.json文件中添加Firebase项目配置。

4. 检查AndroidManifest.xml配置

确保在AndroidManifest.xml中添加了必要的权限和服务配置:

代码语言:javascript
复制
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.yourapp">

    <application
        android:name=".MainApplication"
        android:label="@string/app_name"
        android:icon="@mipmap/ic_launcher"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:allowBackup="false"
        android:theme="@style/AppTheme">

        <!-- 添加Firebase消息服务 -->
        <service
            android:name="io.invertase.firebase.messaging.ReactNativeFirebaseMessagingService"
            android:exported="true">
            <intent-filter>
                <action android:name="com.google.firebase.MESSAGING_EVENT" />
            </intent-filter>
        </service>

        <!-- 添加Firebase实例ID服务 -->
        <service
            android:name="io.invertase.firebase.messaging.ReactNativeFirebaseInstanceIdService"
            android:exported="true">
            <intent-filter>
                <action android:name="com.google.firebase.INSTANCE_ID_EVENT" />
            </intent-filter>
        </service>

    </application>

</manifest>

5. 处理Hermes相关问题

如果你仍然遇到与Hermes相关的问题,可以尝试以下步骤:

清理和重建项目

代码语言:javascript
复制
cd android
./gradlew clean
cd ..
npx react-native run-android

禁用Hermes(仅用于调试)

如果问题仍然存在,可以暂时禁用Hermes以进行调试。在android/app/build.gradle中将enableHermes设置为false

代码语言:javascript
复制
project.ext.react = [
    enableHermes: false  // 暂时禁用Hermes
]

然后重新构建项目:

代码语言:javascript
复制
cd android
./gradlew clean
cd ..
npx react-native run-android
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

React Native实践有感

所以连带的也需要升级react-navigation,但我上面提到升级react-navigation风险比较大,需要比较大的effort去做,所以这里我还是保持RN版本小于0.63,通过react-native-fix-image...由于下载和存储是Native端实现的,只能在Native端去做改动。...Crash问题的追踪我们的项目中使用了Firebase crashlytics来统计分析crash log,从Firebase console可以看到,JS端的exception都会通过RN原生代码抛出...Native的crash则分别按照Android和iOS平台的方式去定位,比如Android上传native debug symbol到Google play console,iOS上传dSYM文件到Firebase...,杜绝错误的数据类型,而不是等到项目编译或者运行阶段才去发现错误,这是JS无法带给我们的。

2.5K10
  • React Native 新架构

    UI Thread(Main Thread/Native thread)。这个线程主要负责原生渲染(Native UI)和调用原生能力(Native Modules)比如蓝牙等。...这些消息队列是异步的,无法保证处理事件。 序列化。通过JSON格式来传递消息,每次都要经历序列化和反序列化,开销很大。 批处理。对Native调用进行排队,批量处理。...JS thread 监听到消息后发请求,服务端返回数据,再通过Bridge返回给Native进行渲染。由于都是异步,就会出现空白模块,导致性能问题。...最彻底的方式,消息不走Bridge。 JS和Native减少通信。两端无法避免的情况下,尽量通信减少次数。比如多个请求合并成一个。 较少JSON的大小。...另外JSI与React无关,可以用在任何JS 引擎(V8,Hermes)。

    1.7K21

    【Web技术】839- React Native 原理与实践

    Hermes Engine Hermes 是 Facebook 2019 年发布的新一代 JS Engine,Hermes 是一款小巧轻便的 JavaScript 引擎,专门针对 Android...Bridge React Native 中,原生端和 JavaScript 交互是通过 Bridge 进行的,Bridge 的作用就是给 React Native 内嵌的 JS Engine 提供原生接口的扩展供... Native 端:原子类型表示为 Native 端的各种基础 UI 组件,例如 RCTText、RCTView 等等 组合类型 类型为函数构造器,它给我们提供了一种自定义元素 UI 和行为的能力,当渲染器遇到组合类型的元素...Modules 用 Java/ObjC 实现的方法(类似 RPC),而不是像原来那样用一层 bridge 来排队等待原生层返回的消息。...原生能力 & 性能 其实两者的在这方面的区别不是很大,性能方面 React Native 稍微差一点。但是原生灵活性上 React Native 要有优势。

    2.4K10

    原来 React Native 已经如此成熟了

    当我重新关注 React Native 之后,我才发现,他原来已经如此成熟了。 新的 JavaScript 引擎 Hermes JavaScript 是一门运行时框架。...为了解决这个问题,React Native 团队 @0.64 版本中引入了一个新的 JavaScript 引擎:Hermes。这是一个专门针对 React Native 进行优化的 JS 引擎。...消息序列化 -> 传输 -> JSBridge 处理解析 -> 原生方法执行 -> 通过 JSBridge 传输返回 -> 消息反序列化 -> 得到数据 这也导致了 JS 层与原生层的通信变成了一个异步过程...以前开发 React Native 最痛苦的,莫过于三方工具库的不成熟,从而导致了调用系统级的能力对开发人员的要求非常高,有的团队甚至还搞不定某些需求。 但是这些问题,都被 Expo 解决了。...我昨天花了一点间,成功的 React Native 中集成了 tailwindcss。

    29120

    React Native推送通知:完整的操作指南

    这里有一个图表,简化了通知服务如何与设备进行通信: 当涉及到React Native中设置推送通知,有几种设置方式: 原生平台特定的通知服务(FCM/APNS) Expo推送通知服务和其他云服务 像...原生平台特定的通知服务(FCM/APNs) Android和iOS平台都提供了用于接收推送通知的原生平台特定API 适用于安卓设备的Firebase消息传递(FCM) 苹果推送通知服务(APNs)适用于...iOS设备 我们可以使用React Native Firebase库来Android上集成FCM,使用 push-notification-ios 库来iOS上集成APNs。...React Native Firebase 库也提供了一种通过 FCM iOS上发送推送通知的方法。... React Native 中处理接收到的通知 要处理接收到的通知,我们首先需要有一个事件监听器,每当用户点击通知都会被调用。

    1.2K10

    新版React Native 混合开发(Android篇)

    React Native的应用场景中,有时候一个APP只有部分页面是由React Native实现的,比如:我们常用的携程App,它的首页下的很多模块都是由React Native实现的,这种开发模式被称为混合开发...此教程适配了0.62.2及以上版本的react-native,为获取最新适配教程,可关注配套教程)。 混合开发的一些其他应用场景: 原有项目中加入RN页面,RN项目中加入原生页面 ?...原生页面中嵌入RN模块 ? RN页面中嵌入原生模块 ? 以上这些都属于React Native混合开发的范畴,那么如何进行React Native混合开发呢?...React Native项目; 通过npm安装react-native的方式添加一个React Native项目 第一步:创建一个名为RNHybridApp的目录,然后该目录下添加一个包含如下信息的package.json...中运行Gradle sync 看是否有 “Failed to resolve: com.facebook.react:react-native:0.x.x” 的错误出现,没有错误则说明配置正确,否则说明配置路由有问题

    7K30

    当我们聊“跨端”,聊“框架”究竟在聊什么

    先后出现,从现在看,React 的状态驱动视图的理念直接影响了 Flutter 和 SwiftUI 的设计 render page 层面,除了传统的 HTML + CSS,还加入了 CSS3、Canvas...React NativeHermes React 2013 年发布,两年后 React Native 就发布了,前几种跨段方案基本都是基于浏览器技术的,RN 这个跨段方案的创新性在于它保留了 JS...vdom 更大的价值在于,人们从 vdom 身上看到跨端开发的希望,所以 React 出现React Native 紧跟着出现是一件非常自然的事情。为什么这么说?...我们再回到 React Native 中,既然 iOS Android 的原生渲染管线都是 RMGUI 范式,那么总是有相似点的,比如说 UI 都是树状嵌套布局,都有事件回调等等。...一旦概念理清,面对性能调优等技术场景,就能抓住主要矛盾,更快更好的发现问题,解决问题。

    57910

    1000千米高空俯瞰 React Native

    一.历史:React Native 从开始到现在 React Native 的定位是通过 React 构建原生 App: A framework for building native apps with...替换成 Hermes P.S.关于 React Native 发展史的更多信息,见React Native 简史 二.架构:原来,你是这样的 RN!...架构设计 React Native 里,中间是 Bridge 层,通过消息通信将 JavaScript 世界与 Native 世界联系起来 具体的,Shadow Tree 用来定义 UI 效果及交互功能...(包括宽高、位置等)传递给主线程,主线程据此创建 Native View 用户交互(图中自左向右的流程),则先由主线程将相关信息打包成事件消息传递到 Shadow 线程,再根据 Shadow Tree...但无论怎样,Learn once, write anywhere 的愿景路上,正向我们赶来 参考资料 React Native 简史 React Native 架构一览 React Native 架构演进

    1.3K20

    2020 年你应该知道的 React

    例如,gatsby-Firebase-authentication 样板文件只 Gatsby.js 中为您提供了完整的 Firebase 身份验证机制,但是其他所有内容都被省略了。...使用 PropTypes,你可以为你的 React 组件定义传入的 props。无论何时向组件传递了错误的类型,在运行应用程序时都会收到错误消息。但是这种形式的类型检查只应该用于较小的应用程序。...当使用这样的类型检查器,您可以开发期间获得错误。您不必启动应用程序就可以找到本可以通过这种类型检查防止的 bug。这样一来,类型检查器就可以提高您的开发人员体验,避免首先引入 bug。...虽然样式指南只给出建议,但是 linter 应用程序中强制执行这个建议。例如,你可以要求遵循流行的 Airbnb 样式指南,你的 IED/编辑器会告诉你每一个错误。...如果您是 React Native 开发人员,想要创建一个 Web 应用程序,您应该查看 React Native Web。

    14.4K40

    现代移动开发哪家强:原生还是跨平台?JetBrains 专家:我选 Flutter

    如果大家更关注这些需求,那原生开发就是最正确的答案。另外,原生开发工具也不断改进,甚至 Xcode 如今也变得不那么恼人了。当然,原生开发也有自己的问题,否则跨平台框架根本就不会出现。...虽然性能方面仍在局限,但 React Native 最近几年来一直探索和改进。不过如果各位开发的应用里有大量动画元素,那建议先别考虑 React Native。...最后说点坏消息,近年来不少知名应用都放弃了 React Native,其中的典型案例当数 Airbnb。但这跟我们自己的开发需求可能并无关系,结合自身实际才有指导意义。...决策审查 做出了开发决策,那么着手开发应用的同时,我们也该看看自己选得对不对、当前有哪些实际困难。毕竟很多错误不会立刻就显现出危害。...比如说,某些厂商几年之后放弃了 React Native,类似的情况最终也可能出现在 Flutter 当中。总之,请随时关注事态发展。问题发展得越早,我们的沉没成本也就越低。

    48830

    🧭【深入解析】跨端框架的核心技术到底是什么?

    先后出现,从现在看,React 的状态驱动视图的理念直接影响了 Flutter 和 SwiftUI 的设计 render page 层面,除了传统的 HTML + CSS,还加入了 CSS3、Canvas...4.React Native:JS Engine + Native RenderPipeLine React NativeHermes React 2013 年发布,两年后 React Native...vdom 更大的价值在于,人们从 vdom 身上看到跨端开发的希望,所以 React 出现React Native 紧跟着出现是一件非常自然的事情。为什么这么说?...我们再回到 React Native 中,既然 iOS Android 的原生渲染管线都是 RMGUI 范式,那么总是有相似点的,比如说 UI 都是树状嵌套布局,都有事件回调等等。...一旦概念理清,面对性能调优等技术场景,就能抓住主要矛盾,更快更好的发现问题,解决问题。

    89020

    【周一通勤电台 · 特辑】六千字漫谈2022后端框架流行趋势

    节约时间 显然,当开发者可以从预先写好的功能中创建应用功能,开发过程所需的时间就会大大减少。这也导致了更少的错误,从而缩短了开发周期,提高了最终产品的质量。...这极大地加快了标准功能的开发,但在实现独特功能可能会限制开发人员的灵活性。 错误的成本高。...6.4 React Native image.png React Native,简称RN,是一个用JavaScript编写的开源平台,最初由Facebook开发。...早在2018年,React Native经历了一次重大的努力,重新架构了该框架,以使其更加通用并摆脱其缺点。 1. React Native框架的好处 JSI(JavaScript接口)。...总而言之,React Native是构建具有近乎原生用户体验的跨平台应用程序的一个不错的选择。 正如我们文中所看到的,有相当多的后端框架可以用来开发网页应用以及移动应用。

    4.4K30

    2022 年 React Native 的全新架构更新

    image 直到目前为止,React Native 的版本号是 0.67 ;我看了眼两年没更新的 GSYGithubApp ,用的 React Native 的版本号是 0.61 ,两年里从 61 升级到了...) 目前 RN 使用 Bridge Module 来让 JS 和 Native 线程进行通信,每次利用 Bridge 发送数据,都需要转换为 JSON, 而收到数据也需要进行解码。...例如,如果 JS 线程需要访问 native modules(例如蓝牙),它就需要向 native 线程发送消息,JS 线程就会通过 Bridge 发送一个 JSON 消息,然后消息 native 线程上进行解码...那 JSI 如何让 JavaScript 直接调用到原生方法?...三、Turbo Modules 之前的架构中 JS 使用的所有 Native Modules(例如蓝牙、地理位置、文件存储等)都必须在应用程序打开之前进行初始化,这意味着即使用户不需要某些模块,但是它仍然必须在启动进行初始化

    2.1K20

    怎么理解React Native的新架构?

    Facebook 2018 年 6 月官方宣布了大规模重构 React Native 的计划及重构路线图。...目的是为了让 React Native 更加轻量化、更适应混合开发,接近甚至达到原生的体验。 之前我还写了一篇文章分析了下 Facebook 的设计想法。...标准化的 JS 引擎接口,React Native 可以替换 v8、Hermes 等引擎。...npx create-react-native-library react-native-simple-jsi 前面的步骤更多的是配置一些模块的信息,值得注意的是选择模块的开发语言要注意,这边是支持很多种类型的...开发、迭代效率、收益都有很大的提升,同样我们也持续关注 React Native 的新架构动态,相信整体方案、性能会越来越好,也期待快速迁移到新架构。 ----

    2K20

    我不认为Flutter比React Native

    小总结:Flutter 的开发者体验具有明显优势;React Native 虽然正在迎头赶上,但还有很长的路要走——不过 Expo 的出现带来了一股强劲助力。...但随着今年春季新架构的推出,它将被原生与 JS 代码间的并发通信所取代。此外,Hermes JS 引擎也让许多关键性能指标更上一层楼。...这意味着虽然我们构建应用程序外观可以尽量强调相似,但实际跑不同平台上往往受到具体解释方法的影响。...而在 React Native 这边,原生集成就有一定的入门门槛了。另外,我们还得跟 React Native 桥接局限作斗争,原生集成的说明文档也不尽人意。...所以使用 Flutter 加 Dart ,开发者可能很少需要再借助什么第三方库。

    2.5K20

    我们弃用 Firebase

    的确,纯从性能上讲, AWS/Azure/ GCP 上构建的定制化原生服务包优于 Firebase 套件。但是,当我们考虑到开发时间和维护成本Firebase 通常是一个合乎逻辑的选择。...Firebase 实时数据库最初给人的感觉相当具有革命性,特别是 WebSockets 被广泛接受或 Server-Sent Events 出现之前。...当然,也有 Firebase 模拟器,但它们很慢,也很难调试,而且普遍存在不足;经常会在负载不是很大的情况下出现意料之外的失败,而你可能期望有一个能够承受足够负载的、健壮的本地环境。...对于这个问题,K-Optional Software 几乎同一间收到了多个关于项目(不是我们的项目)的咨询请求,一切都表明,是 API 的突然变化造成了麻烦。...尽管 Firebase 开发有所下降,但我最近还是经常在这个权限仪表板上看到自己。 根据 Cloud Function 部署文档:Firebase 错误只能在 Google Cloud 上解决。

    32.6K30
    领券