react native push notification
8.1.1
Bereaksi Notifikasi Lokal dan Jarak Jauh Asli untuk iOS dan Android
Repositori ini tidak dipelihara secara aktif. Alasan utamanya adalah waktu. Yang kedua mungkin adalah kerumitan notifikasi di iOS dan Android. Karena proyek ini mungkin memerlukan pemfaktoran ulang yang besar untuk memperbaiki beberapa masalah atau untuk mengimplementasikan fitur baru. Saya pikir Anda mungkin harus mempertimbangkan alternatif ini: Notifee gratis sejak September atau react-native-notifications.
Jika Anda tertarik menjadi pengelola proyek ini, silakan bertanya di isu.
Periksa perubahan dan migrasi di CHANGELOG:
log perubahan
Para pengelola dipersilakan! Jangan ragu untuk menghubungi saya
Changelog tersedia dari versi 3.1.3 di sini: Changelog
npm install --save react-native-push-notification
yarn add react-native-push-notification
CATATAN: Jika Anda menargetkan iOS, Anda juga harus mengikuti petunjuk instalasi untuk PushNotificationIOS karena paket ini bergantung padanya.
CATATAN: Untuk Android, Anda masih harus memperbarui AndroidManifest.xml secara manual (seperti di bawah) untuk menggunakan Notifikasi Terjadwal.
Mengalami masalah? Baca panduan pemecahan masalah sebelum mengangkat masalah.
Silakan baca...
Komponen ini menggunakan PushNotificationIOS untuk bagian iOS. Anda harus mengikuti petunjuk instalasinya.
CATATAN: firebase-messaging , sebelum versi 15 harus memiliki nomor versi yang sama agar dapat berfungsi dengan benar pada waktu build dan waktu proses. Untuk menggunakan versi tertentu:
Di android/build.gradle Anda
ext {
googlePlayServicesVersion = "<Versi layanan bermain Anda>" // default: "+"firebaseMessagingVersion = "<Versi Firebase Anda>" // default: "21.1.0"// Other settingscompileSdkVersion = <Versi SDK kompilasi Anda> // default: 23buildToolsVersion = "<Versi alat build Anda>" // default: "23.0.1"targetSdkVersion = <Versi SDK target Anda> // default: 23supportLibVersion = "<Versi lib dukungan Anda>" // default: 23.1.1}CATATAN: localNotification() berfungsi tanpa perubahan pada bagian aplikasi, sedangkan localNotificationSchedule() hanya berfungsi dengan perubahan berikut:
Di android/app/src/main/AndroidManifest.xml Anda
.....
<menggunakan-izin android:name="android.permission.VIBRATE" />
<menggunakan-izin android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>
<application ....><!-- Ubah nilainya menjadi true untuk mengaktifkan pop-up di latar depan saat menerima notifikasi jarak jauh (untuk mencegah duplikasi saat menampilkan notifikasi lokal, setel ini ke false) --><meta-data android: name="com.dieam.reactnativepushnotification.notification_foreground"android:value="false"/><!-- Ubah nama sumber daya menjadi warna aksen Aplikasi Anda - atau warna lain yang Anda inginkan --><meta-data android:name="com.dieam.reactnativepushnotification.notification_color"android:resource="@color/white"/> <!-- atau @android:color/{name} untuk menggunakan warna standar --><receiver android: nama="com.dieam.reactnativepushnotification.modules.RNPushNotificationActions" />
<penerima android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationPublisher" />
<penerima android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationBootEventReceiver">
<filter-maksud>
<aksi android:nama="android.intent.action.BOOT_COMPLETED" />
<aksi android:nama="android.intent.action.QUICKBOOT_POWERON" />
<aksi android:name="com.htc.intent.action.QUICKBOOT_POWERON"/>
</filter-maksud>
</penerima>
<serviceandroid:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationListenerService"android:exported="false" >
<filter-maksud>
<tindakan android:name="com.google.firebase.MESSAGING_EVENT" />
</filter-maksud>
</layanan>
..... Jika tidak menggunakan warna bawaan Android ( @android:color/{name} ) untuk item meta-data notification_color . Di android/app/src/main/res/values/colors.xml (Buat file jika belum ada).
<sumber daya>
<color name="putih">#FFF</color>
</sumber daya> Jika aplikasi Anda memiliki @Override pada onNewIntent di MainActivity.java pastikan fungsi tersebut menyertakan panggilan super pada onNewIntent (jika MainActivity.java Anda tidak memiliki @Override untuk onNewIntent lewati ini):
@Overridepublic void onNewIntent(Maksud maksud) {
...super.onNewIntent(niat);
...
}Pastikan Anda telah menginstal setup Firebase dengan benar.
Di android/build.gradle
skrip pembangunan {...
ketergantungan {...
classpath('com.google.gms:layanan-google:4.3.3')...
}
} Di android/app/build.gradle
ketergantungan { ...
penerapan 'com.google.firebase:firebase-analytics:17.3.0'
...
}
terapkan plugin: 'com.google.gms.google-services' Kemudian masukkan google-services.json Anda di android/app/ .
Catatan: firebase/catatan rilis
firebase-coretidak diperlukan lagi. SDK ini menyertakan Firebase SDK untuk Google Analytics.Sekarang, untuk menggunakan Analytics atau produk Firebase apa pun yang merekomendasikan penggunaan Analytics (lihat tabel di bawah), Anda perlu menambahkan ketergantungan Analytics secara eksplisit:
com.google.firebase:firebase-analytics:17.3.0.
Di android/settings.gradle
...
termasuk ':react-native-push-notification'project(':react-native-push-notification').projectDir = file('../node_modules/react-native-push-notification/android') Di android/app/build.gradle Anda
ketergantungan {...
proyek implementasi(':react-native-push-notification')...
} Daftarkan modul secara manual di MainApplication.java (jika Anda tidak menggunakan react-native link ):
impor com.dieam.reactnativepushnotification.ReactNativePushNotificationPackage; // <--- Impor Packagepublic class MainApplication extends Aplikasi mengimplementasikan ReactApplication { private final ReactNativeHost mReactNativeHost = new ReactNativeHost(ini) { @Override protected boolean getUseDeveloperSupport() {return BuildConfig.DEBUG;
} @Override Protected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( new MainReactPackage(), new ReactNativePushNotificationPackage() // <---- Tambahkan Paket );
}
};
....
} JANGAN GUNAKAN .configure() DI DALAM KOMPONEN, BAHKAN App
Jika Anda melakukan ini, penangan notifikasi tidak akan diaktifkan karena tidak dimuat. Sebagai gantinya, gunakan
.configure()di file pertama aplikasi, biasanyaindex.js.
impor PushNotificationIOS dari "@react-native-community/push-notification-ios";impor PushNotification dari "react-native-push-notification";// Harus di luar komponen LifeCycle (seperti `componentDidMount`).PushNotification. konfigurasikan({
// (opsional) Dipanggil ketika Token dibuat (iOS dan Android)
onRegister: fungsi (token) {console.log("TOKEN:", token);
},
// (wajib) Dipanggil ketika remote diterima atau dibuka, atau notifikasi lokal dibuka
onNotification: fungsi (notifikasi) {console.log("NOTIFICATION:", notifikasi);// memproses notifikasi// (wajib) Dipanggil ketika remote diterima atau dibuka, atau notifikasi lokal dibukanotification.finish(PushNotificationIOS.FetchResult. Tidak AdaData);
},
// (opsional) Dipanggil ketika Tindakan Terdaftar ditekan dan invokeApp salah, jika benar onNotification akan dipanggil (Android)
onAction: function (notifikasi) {console.log("ACTION:", notifikasi.action);console.log("NOTIFICATION:", notifikasi);// memproses tindakan
},
// (opsional) Dipanggil ketika pengguna gagal mendaftar untuk notifikasi jarak jauh. Biasanya terjadi ketika APNS mengalami masalah, atau perangkatnya berupa simulator. (iOS)
onRegistrationError: function(err) {console.error(err.message, err);
},
// HANYA IOS (opsional): default: semua - Izin untuk mendaftar.
izin: {peringatan: benar, lencana: benar, suara: benar,
},
// Haruskah notifikasi awal muncul secara otomatis
// bawaan: benar
popInitialNotification: benar,
/** * (opsional) default: true * - Ditentukan apakah izin (ios) dan token (android dan ios) akan diminta atau tidak, * - jika tidak, Anda harus memanggil PushNotificationsHandler.requestPermissions() nanti * - jika tidak menggunakan notifikasi jarak jauh atau tidak menginstal Firebase, gunakan ini: * requestPermissions: Platform.OS === 'ios' */
permintaanIzin: benar,}); Folder contoh berisi contoh aplikasi untuk mendemonstrasikan cara menggunakan paket ini. Penanganan notifikasi dilakukan di NotifService.js .
Silakan uji PR Anda dengan aplikasi contoh ini sebelum mengirimkannya. Ini akan membantu menjaga repo ini.
Ketika notifikasi apa pun dibuka atau diterima, callback onNotification dipanggil meneruskan objek dengan data notifikasi.
Contoh objek notifikasi:
{foreground: false, // BOOLEAN: Jika notifikasi diterima di latar depan atau notuserInteraction: false, // BOOLEAN: Jika notifikasi dibuka oleh pengguna dari area notifikasi atau notmessage: 'Pesan Notifikasi Saya', // STRING: Data pesan notifikasi: {}, // OBJEK: Data push atau info pengguna yang ditentukan dalam notifikasi lokal}PushNotification.localNotification(detail: Objek)
CONTOH:
PushNotification.localNotification({
/* Properti Khusus Android */
channelId: "your-channel-id", // (wajib) channelId, jika saluran tidak ada, notifikasi tidak akan terpicu.
ticker: "Ticker Notifikasi Saya", // (opsional)
showWhen: benar, // (opsional) default: benar
autoCancel: benar, // (opsional) default: benar
largeIcon: "ic_launcher", // (opsional) default: "ic_launcher". Gunakan "" tanpa ikon besar.
largeIconUrl: "https://www.example.tld/picture.jpg", // (opsional) default: tidak terdefinisi
smallIcon: "ic_notification", // (opsional) default: "ic_notification" dengan fallback untuk "ic_launcher". Gunakan "" untuk ikon kecil default.
bigText: "Teks besar saya yang akan ditampilkan ketika notifikasi diperluas. Styling dapat dilakukan menggunakan tag HTML (lihat dokumen Android untuk detailnya)", // (opsional) default: prop "message"
subTeks: "Ini adalah subTeks", // (opsional) default: tidak ada
bigPictureUrl: "https://www.example.tld/picture.jpg", // (opsional) default: tidak terdefinisi
bigLargeIcon: "ic_launcher", // (opsional) default: tidak ditentukan
bigLargeIconUrl: "https://www.example.tld/bigicon.jpg", // (opsional) default: tidak ditentukan
warna: "merah", // (opsional) default: default sistem
getar: benar, // (opsional) default: benar
getaran: 300, // panjang getaran dalam milidetik, diabaikan jika getar=salah, default: 1000
tag: "some_tag", // (opsional) tambahkan tag ke pesan
grup: "grup", // (opsional) tambahkan grup ke pesan
groupSummary: false, // (opsional) atur notifikasi ini menjadi ringkasan grup untuk grup notifikasi, default: false
sedang berlangsung: salah, // (opsional) mengatur apakah ini merupakan pemberitahuan "berkelanjutan".
prioritas: "tinggi", // (opsional) mengatur prioritas notifikasi, default: tinggi
visibilitas: "pribadi", // (opsional) mengatur visibilitas notifikasi, default: pribadi
abaikanInForeground: false, // (opsional) jika benar, notifikasi tidak akan terlihat saat aplikasi berada di latar depan (berguna untuk menyamakan tampilan notifikasi iOS). harus digunakan bersama dengan pengaturan `com.dieam.reactnativepushnotification.notification_foreground`
shortcutId: "shortcut-id", // (opsional) Jika notifikasi ini merupakan duplikat dari pintasan Peluncur, setel id pintasan, jika Peluncur ingin menyembunyikan pintasan, default tidak ditentukan
onlyAlertOnce: false, // (opsional) peringatan hanya akan terbuka sekali dengan suara dan pemberitahuan, default: false
kapan: null, // (opsional) Tambahkan stempel waktu (nilai stempel waktu Unix dalam milidetik) yang berkaitan dengan notifikasi (biasanya waktu terjadinya peristiwa). Untuk aplikasi yang menargetkan Build.VERSION_CODES.N dan yang lebih baru, waktu ini tidak ditampilkan lagi secara default dan harus diikutsertakan dengan menggunakan `showWhen`, default: null.
useChronometer: false, // (opsional) Menampilkan kolom `kapan` sebagai stopwatch. Alih-alih menampilkan `kapan` sebagai stempel waktu, notifikasi akan menampilkan tampilan menit dan detik yang diperbarui secara otomatis sejak kapan. Berguna saat menampilkan waktu yang telah berlalu (seperti panggilan telepon yang sedang berlangsung), default: false.
timeoutAfter: null, // (opsional) Menentukan durasi dalam milidetik setelah notifikasi ini harus dibatalkan, jika belum dibatalkan, default: null
messageId: "google:message_id", // (opsional) ditambahkan sebagai `message_id` ke ekstra maksud sehingga membuka pemberitahuan push dapat menemukan data yang disimpan oleh modul @react-native-firebase/messaging.
tindakan: ["Ya", "Tidak"], // (Khusus Android) Lihat dokumen untuk tindakan pemberitahuan untuk mengetahui lebih lanjut
invokeApp: true, // (opsional) Ini mengaktifkan tindakan klik untuk mengembalikan aplikasi ke latar depan atau tetap di latar belakang, default: true
/* Properti khusus iOS */
kategori: "", // (opsional) default: string kosong
subtitle: "Subtitle Notifikasi Saya", // (opsional) judul yang lebih kecil di bawah judul notifikasi
/* Properti iOS dan Android */
id: 0, // (opsional) Bilangan bulat 32 bit unik yang valid dan ditentukan sebagai string. default: ID Unik yang Dibuat Secara Otomatis
title: "Judul Pemberitahuan Saya", // (opsional)
pesan: "Pesan Pemberitahuan Saya", // (wajib)
gambar: "https://www.example.tld/picture.jpg", // (opsional) Menampilkan gambar dengan notifikasi, alias `bigPictureUrl` untuk Android. bawaan: tidak terdefinisi
userInfo: {}, // (opsional) default: {} (menggunakan null memunculkan kesalahan '<null>' nilai JSON)
playSound: salah, // (opsional) default: benar
soundName: "default", // (opsional) Suara yang diputar saat notifikasi ditampilkan. Nilai 'default' memutar suara default. Itu dapat diatur ke suara khusus seperti 'android.resource://com.xyz/raw/my_sound'. Ia akan mencari file audio 'my_sound' di direktori 'res/raw' dan memutarnya. default: 'default' (suara default diputar)
nomor: 10, // (opsional) Bilangan bulat 32 bit valid yang ditentukan sebagai string. default: tidak ada (Tidak boleh nol)
repeatType: "day", // (opsional) Interval pengulangan. Periksa bagian 'Pemberitahuan Berulang' untuk info lebih lanjut.});PushNotification.localNotificationSchedule(detail: Objek)
CONTOH:
PushNotification.localNotificationSchedule({
//... Anda dapat menggunakan semua opsi dari localNotifications
pesan: "Pesan Pemberitahuan Saya", // (wajib)
tanggal: Tanggal baru(Tanggal.sekarang() + 60 * 1000), // dalam 60 detik
izinkanWhileIdle: false, // (opsional) atur notifikasi agar berfungsi saat tertidur, default: false
/* Properti Khusus Android */
repeatTime: 1, // (opsional) Peningkatan repeatType yang dikonfigurasi. Periksa bagian 'Pemberitahuan Berulang' untuk info lebih lanjut.});PushNotification.popInitialNotification (panggilan balik)
CONTOH:
PushNotification.popInitialNotification((pemberitahuan) => {
console.log('Pemberitahuan Awal', pemberitahuan);}); Di Android, tambahkan file suara khusus Anda ke [project_root]/android/app/src/main/res/raw
Di iOS, tambahkan file suara khusus Anda ke Resources proyek di xCode.
Di notifikasi lokasi json tentukan nama file lengkap:
soundName: 'my_sound.mp3'
Untuk menggunakan saluran, buat saluran tersebut saat startup dan teruskan channelId yang cocok ke PushNotification.localNotification atau PushNotification.localNotificationSchedule .
import PushNotification, {Importance} from 'react-native-push-notification';... PushNotification.createChannel({ channelId: "channel-id", // (wajib) channelName: "Saluran saya", // (wajib) channelDescription: "Saluran untuk mengkategorikan notifikasi Anda", // (opsional) default: tidak ditentukan. playSound: false, // (opsional) default: true soundName: "default", // (opsional) Lihat Parameter `soundName` dari kepentingan fungsi `localNotification`: Importance.HIGH, // (opsional) default: Importance.HIGH. Nilai int dari kepentingan notifikasi Android getar: true, // (opsional) default: true pattern if true.},(created) => console.log(`createChannel return '${created}'`) // (opsional) callback mengembalikan apakah saluran telah dibuat, false berarti saluran sudah ada.
);CATATAN: Tanpa saluran, notifikasi tidak berfungsi
Dalam opsi notifikasi, Anda harus memberikan id saluran dengan channelId: "your-channel-id" , jika saluran tidak ada, notifikasi mungkin tidak terpicu. Setelah saluran dibuat, saluran tersebut tidak dapat diperbarui. Pastikan channelId Anda berbeda jika Anda mengubah opsi ini. Jika Anda telah membuat saluran dengan cara lain, itu akan menerapkan opsi saluran tersebut.
Jika Anda ingin menggunakan saluran default lain untuk notifikasi jarak jauh, lihat dokumentasi Firebase:
Siapkan aplikasi klien Firebase Cloud Messaging di Android
<meta-data android:name="com.google.firebase.messaging.default_notification_channel_id" android:value="@string/default_notification_channel_id" />
Untuk notifikasi lokal, tersedia opsi yang sama:
Anda dapat menggunakan:
<meta-data android:name="com.dieam.reactnativepushnotification.default_notification_channel_id" android:value="@string/default_notification_channel_id" />
Jika tidak ditentukan, kembalikan ke nilai Firebase yang ditentukan dalam AndroidManifest :
<meta-data android:name="com.google.firebase.messaging.default_notification_channel_id" android:value="..." />
Jika tidak ditentukan, kembalikan ke id saluran Firebase default fcm_fallback_notification_channel
Anda dapat membuat daftar saluran yang tersedia dengan:
PushNotification.getChannels(fungsi (channel_ids) {
console.log(channel_ids); // ['saluran_id_1']});Anda dapat memeriksa apakah ada saluran dengan:
PushNotification.channelExists(channel_id, fungsi (ada) {
console.log(ada); // benar/salah});Anda dapat memeriksa apakah suatu saluran diblokir dengan:
PushNotification.channelBlocked(channel_id, function (diblokir) {
console.log(diblokir); // benar/salah});Anda dapat menghapus saluran dengan:
PushNotification.deleteChannel(channel_id);
Parameter id untuk PushNotification.localNotification diperlukan untuk operasi ini. Id yang diberikan kemudian akan digunakan untuk operasi pembatalan.
PushNotification.localNotification({...id: '123'...});PushNotification.cancelLocalNotification('123' 
