适用于iOS的Firebase的ReactNative推送通知

什么是推送通知？

推送通知是在移动设备上弹出的消息。 应用发布者可以随时发送它们； 用户无需进入应用程序或使用其设备即可接收它们。 他们可以做很多事情； 例如，他们可以显示最新的体育比分，让用户采取行动（例如下载优惠券）或让用户知道某个事件（例如快速销售）。

推送通知看起来像SMS短信和移动警报，但它们仅覆盖已安装您的应用程序的用户。 每个移动平台都支持推送通知-iOS，Android，Fire OS，Windows和BlackBerry都有自己的服务。 下面，我将展示如何为iOS平台集成ReactNative推送通知。

请参阅此文章，以获取有关推送通知的更多信息： https : //www.urbanairship.com/push-notifications-explained

集成到iOS平台的ReactNative Push Notifications中的步骤

首先，创建一个React Native新项目，我们将配置推送通知。

 反应本地初始化反应推送通知 

现在，当您安装React Native时，需要考虑的几件事才能使它们正常工作而没有任何错误。 您应该使用XCode 10（当前最新），React Native 0.55（当前最稳定）。

接下来，我们为React Native https://github.com/evollu/react-native-fcm安装Firebase Cloud Messaging软件包

  react-native链接react-native-fcm 

安装Firebase Cloud Messaging Package之后，我们需要使用CocaPods安装FCM框架。 要安装它，我们首先在刚刚创建的“ react-push-notifications”项目上的“ ios”目录中导航，然后运行以下命令：

  cd ios && pod初始化 

所以，我的PodFile看起来像这样

  ＃取消注释下一行以定义项目的全局平台 
 平台：ios，“ 9.0” 

 目标“反应推送通知” 
  ＃如果您使用的是Swift或想使用动态框架，请取消注释下一行 
  ＃use_frameworks！ 

  ＃pods for react-push-notifications 
  pod“ Firebase /消息传递” 
 结束 

并且如果在Podfile中添加该行之后已经有了现有的pod文件，则只需运行以下命令：

 吊舱安装 

在iOS项目中安装“ Firebase / Messaging”框架。

现在我们测试并运行项目：

 反应本机运行iOS 

如果成功运行，则表示一切均已正确实施。

之后，我们转到Firebase控制台（https://console.firebase.google.com/），并通过单击“添加项目”按钮，然后输入项目名称并单击“创建项目”按钮来创建新项目。 在下一个屏幕中，我们需要单击“将Firebase添加到您的iOS应用”以创建一个新应用。 在显示的弹出窗口中，我们输入可以从iOS项目的XCode获取的bundle id。 然后，我们将获得下载“ GoogleService-Info.plist”的屏幕，然后通过选中“如果需要复制项目”将其拖放到根iOS应用程序上。

接下来，我们必须转到开发人员Apple帐户来创建身份验证密钥，您可以查看此视频教程如何创建身份验证密钥，然后将其上传到Firebase控制台：https://youtu.be/HRocERqesHA

按照视频中的说明进行操作后，剩下要做的就是对iOS本机代码进行一些更改，如下所示。

所以首先我们必须在AppDelegate.m中添加以下代码

  #import“ RNFIRMessaging.h” 

然后将代码段添加到didFinishLaunchingWithOptions方法中：

  [FIRApp配置]； 

接下来，在AppDelegate.m中，我们添加：

  -（void）application：（UIApplication *）application didReceiveRemoteNotification：（NSDictionary *）notification fetchCompletionHandler：（void（^）（UIBackgroundFetchResult））handler { 
  [[NSNotificationCenter defaultCenter] postNotificationName：FCMNotificationReceived对象：self userInfo：notification]； 
 处理程序（UIBackgroundFetchResultNewData）; 
  } 

因此，AppDelegate.m应该看起来像这样：

  / ** 
  *版权所有（c）2015年至今，Facebook，Inc.。 
  * 
  *此源代码是根据MIT许可获得许可的，该许可位于 
  *此源树的根​​目录中的LICENSE文件。 
  * / 

  #import“ AppDelegate.h” 

  #import  
  #import  

  #import“ RNFIRMessaging.h” 

  @implementation AppDelegate 


  -（BOOL）应用程序：（UIApplication *）应用程序didFinishLaunchingWithOptions：（NSDictionary *）launchOptions 
  { 
  NSURL * jsCodeLocation; 

  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot：@“ index” fallbackResource：nil]; 

  RCTRootView * rootView = [[RCTRootView alloc] initWithBundleURL：jsCodeLocation 
  moduleName：@“ ReactPushNotifications” 
  initialProperties：无 
  launchOptions：launchOptions]; 
  rootView.backgroundColor = [[UIColor alloc] initWithRed：1.0f绿色：1.0f蓝色：1.0f alpha：1]; 


  self.window = [[UIWindow alloc] initWithFrame：[UIScreen mainScreen] .bounds]; 
  UIViewController * rootViewController = [UIViewController新]; 
  rootViewController.view = rootView; 
  self.window.rootViewController = rootViewController; 
  [self.window makeKeyAndVisible]; 

  // Firebase配置 
  [FIRApp配置]； 
  [[UNUserNotificationCenter currentNotificationCenter] setDelegate：self]; 

 返回是； 
  } 

  -（void）application：（UIApplication *）application didReceiveRemoteNotification：（nonnull NSDictionary *）userInfo fetchCompletionHandler：（nonnull void（^）（UIBackgroundFetchResult））completionHandler { 
  [RNFIRMessaging didReceiveRemoteNotification：userInfo fetchCompletionHandler：completionHandler]； 
  } 

  -（void）userNotificationCenter：（UNUserNotificationCenter *）center willPresentNotification：（UNNotification *）Notification withCompletionHandler：（void（^）（UNNotificationPresentationOptions））completionHandler 
  { 
  [RNFIRMessaging willPresentNotification：Notification withCompletionHandler：completionHandler]； 
  } 

  ＃如果已定义（__IPHONE_11_0） 
  -（void）userNotificationCenter：（UNUserNotificationCenter *）center didReceiveNotificationResponse：（UNNotificationResponse *）使用CompletionHandler响应：（void（^）（void））completionHandler 
  { 
  [RNFIRMessaging didReceiveNotificationResponse：使用CompletionHandler：completionHandler响应]； 
  } 
  ＃其他 
  -（void）userNotificationCenter：（UNUserNotificationCenter *）center didReceiveNotificationResponse：（UNNotificationResponse *）使用CompletionHandler响应：（void（^）（））completionHandler 
  { 
  [RNFIRMessaging didReceiveNotificationResponse：使用CompletionHandler：completionHandler响应]； 
  } 
  ＃万一 

  //如果您不想使用本地通知，则可以跳过此方法 
  -（void）应用程序：（UIApplication *）应用程序didReceiveLocalNotification：（UILocalNotification *）notification { 
  [RNFIRMessaging didReceiveLocalNotification：notification]; 
  } 
  @结束 

而且我们必须在React Native js文件上添加代码，因此新的index.js文件如下所示：

  / ** 
  *示例React Native应用 
  * https://github.com/facebook/react-native 
  * @流 
  * / 

 从'react'导入React，{组件}; 
 导入{ 
  AppRegistry， 
  StyleSheet， 
 文本， 
 视图 
  }来自“ react-native”； 
 从'react-native-fcm'导入FCM {FCMEvent}； 

  componentDidMount（）{ 
  FCM.requestPermissions（）;  //对于iOS 
  FCM.getFCMToken（）。then（令牌=> { 
  console.log（'fcm token：'，令牌） 
  //将fcm令牌存储在服务器中 
  }）; 
  console.log（'fcm token：'，FCMEvent.RefreshToken.toString（））; 
  console.log（'fcm notification：'，FCMEvent.Notification.toString（））; 
  console.log（'fcm notification ----：'，FCMEvent.Notification）; 
  } 

  render（）{ 
 返回（ 
   
   
 欢迎使用React Native！ 
   
   
 首先，编辑index.js 
   
   
 按Cmd + R重新加载，{'\ n'} 
  Cmd + D或为开发菜单摇动 
   
   
  ）; 
  } 
  } 

  const styles = StyleSheet.create（{ 
 容器： { 
 弹性：1， 
  justifyContent：“中心”， 
  alignItems：'中心'， 
  backgroundColor：'＃F5FCFF'， 
  }， 
 欢迎：{ 
  fontSize：20， 
  textAlign：'居中'， 
 保证金：10， 
  }， 
 说明：{ 
  textAlign：'居中'， 
 颜色：“＃333333”， 
  marginBottom：5， 
  }， 
  }）; 

  AppRegistry.registerComponent（'react-push-notifications'，（）=> ReactPushNotifications）; 

然后，我们运行项目以查看是否一切正常。 运行成功后，我们会从Firebase控制台发出远程测试通知，如果您收到它，我们就可以成功完成所有设置🙂

有麻烦吗？

如果您在执行推送通知过程中遇到任何问题 ，请在下面发表评论，以便我可以帮助您解决问题或有其他问题与我联系。