通过React Native触发iOS 10可操作的推送通知

在本教程中，我们使用Xcode和React Native来配置和创建本地自定义推送通知。

背景

通知内容扩展用于显示iOS应用通知的自定义界面。 React Native可让您仅使用JavaScript构建移动应用

使用React Native创建一个新应用

请按照此处的说明安装React Native并生成一个新项目：

在Xcode中启用推送通知

您可以按照此处的步骤启用本地推送通知：

确保您的捆绑包标识符是唯一的。 尽管还有更多步骤可以启用远程通知，但您所要做的就是切换此开关以启用测试本地推送通知。

在Xcode中链接React Native的PushNotificationIOS库

请按照此处的说明将React Native的PushNotificationIOS库链接到Xcode。

使用Xcode在您的应用中创建新目标

选择您的Xcode项目，然后添加并命名一个Notification Content扩展目标：

告诉Xcode如何找到您的通知

出现新目标。 选择它，然后在其Info.plist中 ，设置UNNotificationExtensionCategory和UNNotificationExtensionInitialContentSizeRatio的值。

测试来自React Native的推送通知

在您的React Native代码中导入库：

 从'react-native'导入{PushNotificationIOS}; 

触发来自RN的推送。 确保使用上面创建的类别：

  componentDidMount（）{ 
  PushNotificationIOS.requestPermissions（）; 
  PushNotificationIOS.presentLocalNotification（{ 
  alertBody：“ Hello World”， 
 类别：“ myNotifcationCategory” 
  }）; 
  } 

在React Native中启用LiveReload后，当我关闭应用程序并保存RN文件时，可以看到推送通知：

下一步：自定义视图并处理用户操作

在这里，您可以编辑NotificationViewController.swift文件以实现didReceive方法。 使用它来配置您的通知界面并处理用户操作。

在RN中使用userInfo对象将任意信息传递到Xcode ViewController，从而填充MainInterface.storyboard提供的UI字段。