# 为 React Native 设置角标

由于 React Native 插件不包含 `PWNotificationExtensionManager` 头文件，您必须执行几个额外步骤才能为您的 React Native 项目实现角标功能。


<Aside type="note">
要为 iOS 原生应用实现角标功能，请参阅 [设置角标](/zh/developer/pushwoosh-sdk/ios-sdk/setting-up-badges/) 指南。
</Aside>

#### 1. 添加通知服务扩展 (File -> New -> Target...)

<img src="/shared-7.webp" alt=""/>

#### 2. 选择 “Notification Service Extension”

<img src="/react-native-setting-up-badges-for-react-native-1.webp" alt=""/>

#### 3. 按如下方式更新通知服务扩展代码：

```
#import "NotificationService.h"
#import <Pushwoosh/PWNotificationExtensionManager.h>

@interface NotificationService ()

@property (nonatomic, strong) void (^contentHandler)(UNNotificationContent *contentToDeliver);
@property (nonatomic, strong) UNMutableNotificationContent *bestAttemptContent;

@end

@implementation NotificationService

- (void)didReceiveNotificationRequest:(UNNotificationRequest *)request withContentHandler:(void (^)(UNNotificationContent * _Nonnull))contentHandler {
  self.contentHandler = contentHandler;
  self.bestAttemptContent = [request.content mutableCopy];

  [[PWNotificationExtensionManager sharedManager] handleNotificationRequest:request contentHandler:contentHandler];
}

- (void)serviceExtensionTimeWillExpire {
  // Called just before the extension will be terminated by the system.
  // Use this as an opportunity to deliver your "best attempt" at modified content, otherwise the original push payload will be used.
  self.contentHandler(self.bestAttemptContent);
}

@end
```

<Aside type="note">
请将 `#import "NotificationService.h"` 行中使用的扩展名替换为您自己的扩展名。
</Aside>

#### 4. 将依赖项链接到 target

React Native 不会自动将所有必需的依赖项链接到手动创建的 target，因此您应更新 target 的 **Build Phases** 并提供必要的信息：

<img src="/react-native-setting-up-badges-for-react-native-2.webp" alt=""/>

只需点击 **Compile Sources** 和 **Link Binary With Libraries** 下方的 **+** 号，然后搜索所需的库/框架即可。

#### 5. 在 Xcode 中为两个 target 添加 **App Groups** 功能，并为**应用和扩展**设置相同的组：

<img src="/react-native-setting-up-badges-for-react-native-3.webp" alt=""/>

#### 6. 将 **PW\_APP\_GROUPS\_NAME** 键添加到**两个** target 的 info.plist 文件中。该值是您的 app group 的名称：

<img src="/react-native-setting-up-badges-for-react-native-4.webp" alt=""/>