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