React Nativeでローカル通知を使用する方法

ローカル通知を実装するためには、いくつかの手順を踏む必要があります。以下に、シンプルで簡単な方法とコード例を示します。

React Nativeのプロジェクトを作成します。ターミナルで以下のコマンドを実行します:

npx react-native init NotificationApp

必要なパッケージをインストールします。ターミナルでプロジェクトのディレクトリに移動し、以下のコマンドを実行します:

cd NotificationApp
npm install @react-native-community/push-notification-ios @react-native-community/push-notification-android

プラットフォームごとの設定を行います。

iOSの場合: Xcodeを開き、プロジェクトの "ios" フォルダ内の .xcworkspace ファイルを選択します。次に、AppDelegate.m ファイルを開き、以下のコードを追加します:

#import <UserNotifications/UNUserNotificationCenter.h>
// ...
// didFinishLaunchingWithOptionsメソッド内に以下のコードを追加します
UNUserNotificationCenter *center = [UNUserNotificationCenter currentNotificationCenter];
[center requestAuthorizationWithOptions:(UNAuthorizationOptionAlert + UNAuthorizationOptionSound)
                      completionHandler:^(BOOL granted, NSError * _Nullable error) {
  // ユーザーの許可状態を処理するコードを追加します
}];

Androidの場合: android/app/src/main/AndroidManifest.xml ファイルを開き、以下のコードを追加します:

<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.notificationapp">
  <!-- 以下のパーミッションを追加します -->
  <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED" />
  <!-- 以下のサービスを追加します -->
  <application ...>
    ...
    <service android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationActions" />
    <service android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationListenerService" />
  </application>
</manifest>

ローカル通知を送信するためのコードを追加します。以下は、ボタンが押されたときにローカル通知を送信する例です:

import PushNotification from '@react-native-community/push-notification-ios'; // iOSの場合
// import PushNotification from '@react-native-community/push-notification-android'; // Androidの場合
// ...
const sendLocalNotification = () => {
  PushNotification.localNotification({
    title: 'Notification Title',
    message: 'Notification Message',
  });
};
// ...
<Button title="Send Notification" onPress={sendLocalNotification} />

以上で、React Nativeでローカル通知を使用する方法が分かりました。このコード例を使って、ユーザーに通知を表示する機能を実装できます。必要に応じて、タイトルやメッセージをカスタマイズすることもできます。