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

React Native Push通知,FCM表示token仅在iOS上无效(安卓工作)

基础概念

React Native 是一个用于构建原生移动应用的 JavaScript 框架。Push 通知是一种允许应用在后台或关闭状态下接收消息的技术。Firebase Cloud Messaging (FCM) 是 Google 提供的用于发送推送通知的服务。

相关优势

  • 跨平台:React Native 允许你使用同一套代码库为 iOS 和 Android 平台构建应用。
  • 集成简单:FCM 提供了易于集成的 SDK,可以快速实现推送通知功能。
  • 实时通信:推送通知可以实现实时消息传递,提高用户参与度。

类型

  • 远程通知:由服务器发送到设备的通知。
  • 本地通知:由应用本身在设备上生成的通知。

应用场景

  • 消息提醒:如新闻应用的新闻更新。
  • 促销活动:电商应用的优惠信息。
  • 社交互动:社交应用的消息通知。

问题分析

FCM token 在 iOS 上无效,但在 Android 上工作,可能是由于以下原因:

  1. 配置问题:iOS 的配置文件(如 Info.plist)可能未正确设置。
  2. 权限问题:iOS 可能需要特定的权限才能接收推送通知。
  3. 代码问题:React Native 或 FCM 的集成代码可能存在问题。

解决方法

1. 检查配置文件

确保 Info.plist 文件中包含以下内容:

代码语言:txt
复制
<key>NSLocalNotificationUsageDescription</key>
<string>我们需要访问您的通知权限以发送重要信息。</string>
<key>NSMicrophoneUsageDescription</key>
<string>我们需要访问您的麦克风以进行语音通话。</string>

2. 请求权限

在应用启动时请求推送通知权限:

代码语言:txt
复制
import { PermissionsAndroid, Alert } from 'react-native';

const requestPushNotificationPermissions = async () => {
  try {
    const granted = await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.ACCESS_NOTIFICATION_POLICY,
      {
        title: '通知权限',
        message: '我们需要访问您的通知权限以发送重要信息。',
        buttonNeutral: '稍后询问',
        buttonNegative: '拒绝',
        buttonPositive: '同意',
      }
    );
    if (granted === PermissionsAndroid.RESULTS.GRANTED) {
      console.log('通知权限已授予');
    } else {
      console.log('通知权限被拒绝');
    }
  } catch (err) {
    console.warn(err);
  }
};

requestPushNotificationPermissions();

3. 检查 FCM 集成代码

确保 FCM 集成代码正确无误。以下是一个简单的示例:

代码语言:txt
复制
import firebase from '@react-native-firebase/app';
import '@react-native-firebase/messaging';

if (!firebase.apps.length) {
  firebase.initializeApp({
    apiKey: 'YOUR_API_KEY',
    appId: 'YOUR_APP_ID',
    messagingSenderId: 'YOUR_MESSAGING_SENDER_ID',
    projectId: 'YOUR_PROJECT_ID',
  });
}

const messaging = firebase.messaging();

messaging.onTokenRefresh(newToken => {
  console.log('New token:', newToken);
});

messaging.onMessage(remoteMessage => {
  console.log('Message data:', remoteMessage.data);
});

4. 检查 Apple Developer 配置

确保在 Apple Developer 管理后台中正确配置了推送通知证书和 App ID。

参考链接

通过以上步骤,你应该能够解决 FCM token 在 iOS 上无效的问题。如果问题仍然存在,请检查控制台日志以获取更多详细信息,并根据具体情况进行调试。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

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

React Native 中的推送通知架构 在我们深入了解如何在 React Native 应用中实现推送通知的技术细节之前,理解React Native推送通知工作原理可能会有所帮助。...原生平台特定的通知服务(FCM/APNs) Android和iOS平台都提供了用于接收推送通知的原生平台特定API 适用于设备的Firebase云消息传递(FCM) 苹果推送通知服务(APNs)适用于...iOS设备 我们可以使用React Native Firebase库来在Android上集成FCM,使用 push-notification-ios 库来在iOS上集成APNs。...React Native Firebase 库也提供了一种通过 FCMiOS发送推送通知的方法。...带有工作后端的示例应用如下所示: 接下来,我们将从React Native Expo获取推送通知令牌,以开始接收应用程序的通知

1.1K10

uni-app 如何实现消息推送功能?

国内Android的Push是一个混乱的世界,因为Google的Push服务FCM 被墙(从HBuilderX2.7.10开始,支持谷歌FCM,参考: UniPush支持谷歌推送FCM配置指南),所以一些国内的手机厂商各自做了自己的推送...而如果每个手机的官方Push SDK都集成开发一遍,这么多平台,工作量会非常巨大,管理维护也很麻烦。 UniPush解决了这个难题,开发者只需要开发一次。...------在线'); } else { console.log('------离线'); } } else { //...因为这个格式被封装了,做成了通知栏展示 换个格式就行(比如里面多个字段,或换个字段名) */ /*** 此格式的透传消息由 unipush...内容\", // payload:\"自定义数据\" // }" // }, // Hbulidx 版本大于 ## 3.4.18,不再通知栏展示

5.7K22
  • 这么多移动开发的方式,传统方式写IOS 还有出路吗?

    前言 我所说的传统的方式是指,用 Java 或者 Kotlin 写,用 Object-C 或者 Swift 写 IOS。...回想我 2014 年上大学的时候,老师跟我们说最近两年移动端特别的火,出去特别好找工作,万万没想到,到了 2016 年,我所在的实验室的学长去找工作就已经很难了。...现在都 2018 年了,作为一个本科生找或者 IOS 就更难了,虽然移动市场不会消失,但是用户或者开发者来说,原生移动应用都有天生的痛点。...webview 解决主要的渲染工作native 在 webview 的基础负责原生组件的调用。...像 RN 和 Flutter ,他们是解决跨平台的问题,写一套代码,IOS 都能用,而且是原生的。 而像 PWA 、微信小程序,他们是用 web 的方式来达到跨平台的方式。

    1.7K60

    React Native学习之Android的返回键BackAndroid详解

    前言 最近在学习使用 React Native开发,iOS搞完,开始适配,由于木有接触过,所以碰到了很多问题,第一个问题,的返回键BackAndroid问题, 我写了一个工具类,来搞定,其中用到了...java原生代码与js交互;好吧,下面开始正式内容: 上代码: // BackAndroidTool // 功能: "手机上的返回键" // Created by 小广 on 2016-05-10...} from 'react-native'; // 类 var NativeCommonTools = NativeModules.CommonTools; export default {...Native学习:http://reactnative.cn/docs/0.25/native-modules-android.html#content); package com.commonTools...); getCurrentActivity().startActivity(setIntent); } } 总结 以上就是这篇文章的全部内容了,本文还有许多不足,希望本文的内容对大家的学习或者工作具有一定的参考学习价值

    1.4K20

    React Native 开发心得分享

    模拟器无法请求本地 api​ 由于一开始是在 Web 端进行调试开发的,所以没留意到这个问题,直到切换到模拟器之后发现模拟器无法请求本地后端服务,在IOS 端暂无这问题。...adb reverse tcp:6001 tcp:6001 此时模拟器便可正常请求本地后端服务的资源,IOS 端并未有该问题。...我曾与开发打过两次交道: 一段是在学习逆向的时候,免不了学习一些基础的原生开发的知识。...另一段是在接触自动化开发的时候,看到了 Auto.js 这个库, 可以使用 JavaScript 和 Node.js 实现小型的应用(不支持 IOS),更多是使用这个库来编写一些脚本类相关的应用。...Auto.js Pro 移除了自动化测试、图片处理、消息通知等模块,如果你需要实现的是自动化、工作流工具,则不适合 Auto.js Pro。

    29331

    H5 手机 App 开发入门:技术篇

    三、原生技术栈 原生技术栈分成 iOS两个平台。 简单说,iOS 的原生技术栈就是使用 Object-C 语言或 Swift 语言,在 Xcode 开发环境中编程。...这样的话,只要写一次 React 页面,就能分别编译成 iOS的原生 App。这就是 React Native 项目的由来。 ?...举例来说,React Native 的文本渲染控件是,翻译成 iOS 控件为UIView,翻译成安控件为TextView。...上面代码中,React Native 自身的WebView控件,编译时会分别转为 iOS的原生 WebView 控件。 接下来,预览页面效果。...如果你想用 React Native 做到 iOS体验一致,并且充分发挥原生控件的功能,就需要同时熟悉 React NativeiOS三个平台,这对开发者的要求实在太高了。

    6.7K41

    从Mobile8.0平台与微应用剖析RN组件生命周期

    React-native微应用:使用React-native语言开发的微应用。 原生微应用:使用iOS/Android原生言语开发的微应用。...但是目前已发布的普元Mobile8.0平台中的微应用只支持HTML5一种实现方式,在后续的版本中我们还会加入由React Native/Ios原生等技术实现的微应用,从而更具市场竞争力。...这里的H5View组件是我们实现跨平台的关键,也是React Native与Android / iOS交互的桥梁。...以Android为例,在平台下我们使用Native组件H5View,实际上调用到的是由Android原生层封装的H5View。 但这个Android的H5View就是所谓的微应用容器了吗?...这一周期便是移除监听事件,包括物理返回和微应用关闭事件,避免不必要的错误。

    1.1K10

    React Native介绍及开发环境(Mac)搭建

    因此RN如果要做全套,起码需要一台MBP+一台iphone+一台机。 此外ios开发者账号是要钱的(每年800+)。所以本系列文章都会以开发为主。 准备 假如安装node10以上版本。...开发环境 安装JDK(Java Development Kit) React Native 需要 Java Development Kit [JDK] 1.8(暂不支持 1.9 及更高版本,Java...推荐开发环境:Mac系统 + ⼀一部廉价的⼿手机 测试adb连接 () 1. 开启 USB 调试 在默认情况下 Android 设备只能从应⽤用市场来安装应⽤用。...第一个应用 这时候回到你的应用,执行编译命令: cd AwesomeProject react-native run-android 如果是第一次编译,这是一段相对比较长的编译等待 ?...cd AwesomeProject react-native run-ios 这时候在ios模拟器就会看到当前的程序。

    2.9K20

    漫谈Android组件化及Web化

    另外减少包体积同样也很重要,一般同个App,iOS的包体积会比Android的更大,这是由于iOS无法进行本地代码的动态下发,而国内的渠道审核相对比较松一些。...在打包的时候会为每个资源分配一个32位Int型的ID,采用16进制表示。0x后面是类似PPTTEEEE的形式,TT代表类别,EEEE代表条目,中所有打包资源ID的PP都是7F。...Google玩转动态化 虽然动态框架在国内很流行,但国外对此却不是很热衷,他们更多的还是使用React Native。...但是H5体验还是不如Native,在动画以及一些高级功能方面也不够强。 而组件化也存在着问题,在最新发布的Android P版本中限制了对私有API的访问,一旦访问私有API 应用就会崩溃。...首先是React NativeReact Native中每个页面都是一个View,且都在Activity中,它通过控制View的切换来进行页面跳转。

    1.1K50

    ReactNative开发环境的搭建与开发前准备

    命令成功执行后,进入到项目根目录中,如下: 使用react-native run-ios或者react-native run-android来进行iOS项目或者Android项目的运行,如果你看到如下图所示的界面...,恭喜你,你的ReactNative项目已经可以跑起来了(需要注意:运行项目的时候,模拟器必须先启动): 需要注意,运行iOS项目时,会默认启动Xcode的默认模拟器,如果要启动特定的模拟器...,可以使用如下命令: react-native run-ios --simulator "iPhone SE" xcrun simctl list devices命令可以打印出所有可用的iOS模拟器...,示例如下: 观察HelloWorld项目结构,其目录如下图: 其中node_modules为node依赖包的目录,andorid文件夹为项目目录,ios文件夹为iOS项目目录。...模拟器中使用command+R来进行界面的刷新,效果如下: 在模拟器中双击R键来进行界面的刷新。

    2.1K20

    【Hybrid开发高级系列】ReactNative(六) —— 与现有的应用程序集成(IOS

    1 与现有的应用程序集成(IOS)         由于React并没有做出关于你其他的技术堆栈的假设——通常在 MVC 中简单的用 V 来表示——这很容易嵌 入到现有non-React Native应用程序中...事实,它与另外的最佳实践社区工具集成了,如 CocoaPods。...我们需要用它来下载React Native。如果你还没有安装CocoaPods,请查看本教程。         当你准备使用CocoaPods工作时,添加以下行到 Podfile 中。...2 参考链接 React Native之调用原生控件 http://blog.csdn.net/jj120522/article/details/51968278 React-Native之Android.../article/details/50899946 使用React-Native Code push热更新 增量更新 动态修复bug移动开发 http://www.jianshu.com/p/ec8d64681e53

    25520

    react-native使用cookie

    前言 不久前,因为课程需要,我使用react native搭建了人生第一个完整的app--一个广外的教务查询系统。...祥见我的第一个react native项目 总体,那个项目可以分成三个部分 1、手机端app,负责展示数据 2、爬虫服务器,负责爬取教务系统的信息,返回给手机端app 3、广外的教务系统,显示学生信息...我依赖于以前写的爬虫程序,运行在服务器,做成了这一个系统。 但是,手机客户端本来就是一个具有很强处理能力的终端,为什么要把这个工作屈身在一个服务器呢。...我对原生android了解不多,之前听quanta里面的师兄们讨论是说,是不支持保存cookie的。...但是react native毕竟是js转android(或iOS),谁知道在转化过程有没有做处理了。google一番得到模棱两可的说法。看来还是得试验一番。

    3K00
    领券