React Native如何集成推送通知

要在React Native项目中集成推送通知，您可以使用第三方库react-native-push-notification

1. 安装库：

npm install --save react-native-push-notification

2. 对于iOS，您需要使用CocoaPods安装一些依赖项。在ios文件夹中创建一个名为Podfile的文件（如果尚不存在），并添加以下内容：

platform :ios, '10.0'
require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

target 'YourProjectName' do
  config = use_native_modules!

  use_react_native!(:path => config["reactNativePath"])

  target 'YourProjectNameTests' do
    inherit! :complete
    # Pods for testing
  end

  # Enables Flipper.
  #
  # Note that if you have use_frameworks! enabled, Flipper will not work and
  # you should disable the next line.
  use_flipper!()

  post_install do |installer|
    react_native_post_install(installer)
  end
end

确保将YourProjectName替换为您的项目名称。然后，在ios文件夹中运行pod install。

3. 链接库（对于React Native < 0.60，需要手动链接）：

npx react-native link react-native-push-notification

4. 配置库：

在android/app/src/main/AndroidManifest.xml文件中添加以下权限：

<uses-permission android:name="android.permission.WAKE_LOCK" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED" />
<uses-permission android:name="android.permission.GET_ACCOUNTS" />

在<application>标签内添加以下代码：

<receiver android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationPublisher" />
<receiver android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationBootEventReceiver">
  <intent-filter>
    <action android:name="android.intent.action.BOOT_COMPLETED" />
  </intent-filter>
</receiver>

在<application>标签内添加以下代码以配置通知样式：

<meta-data
  android:name="com.google.firebase.messaging.default_notification_icon"
  android:resource="@mipmap/ic_launcher" />
<meta-data
  android:name="com.google.firebase.messaging.default_notification_title"
  android:value="@string/app_name" />
<meta-data
  android:name="com.google.firebase.messaging.default_notification_body"
  android:value="@string/app_description" />

5. 初始化库：

在index.js（或主入口文件）中，导入并初始化库：

import PushNotification from 'react-native-push-notification';

PushNotification.configure({
  // (optional) Called when Token is generated (iOS and Android)
  onRegister: function (token) {
    console.log('TOKEN:', token);
  },

  // (required) Called when a remote or local notification is opened or received
  onNotification: function (notification) {
    console.log('NOTIFICATION:', notification);

    // process the notification
  },

  popInitialNotification: true,
  requestPermissions: true,
});

6. 请求权限：

对于Android，在AndroidManifest.xml中添加以下代码以请求权限：

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

对于iOS，在Info.plist中添加以下代码以请求权限：

<key>NSLocationWhenInUseUsageDescription</key>
<string>App需要您的位置信息来发送推送通知</string>

现在，您已经成功地在React Native项目中集成了推送通知。您可以使用PushNotification.localNotification()和PushNotification.remoteNotification()方法发送本地和远程通知。更多关于react-native-push-notification库的信息和配置选项，请参阅官方文档：https://github.com/react-native-push-notification/react-native-push-notification