React Native With Firebase
Local, Scheduled, Push Notification
React Native, Local, Scheduled, Push Notification With Firebase
Firebase를 사용하여 로컬 푸시 알림 예약
사진 "); background-size: 1px 1px; background-position: 0px calc(1em + 1px);">제이미 거리 에 "); background-size: 1px 1px; background-position: 0px calc(1em + 1px);">Unsplash
앱 사용이 계속 증가함에 따라 앱 개발자는 사용자의 참여를 유도 할 수있는 새로운 방법을 계속 찾고 있습니다. 푸시 알림은 사용자의 참여와 정보를 유지하는 한 가지 방법입니다.
푸시 알림은 앱이 사용자 재 참여 및 유지를 유도하는 데 사용하는 통신 채널입니다. 푸시 알림 기술은 단일 메시지 전달 시스템에서 풍부한 대화식 매체에 이르기까지 먼 길을 걸어 왔습니다.
원격 및 로컬의 두 가지 유형의 알림이 있습니다.
원격 알림
원격 알림을 사용하면 회사 서버 중 하나를 사용하여 Apple Push Notification 서비스 또는 FCM을 통해 사용자 장치로 데이터를 푸시합니다.
지역 알림
Android와 IOS는 모두 애플리케이션에서 로컬로 알림을 트리거하는 기능을 지원합니다. 이들은 즉시 표시되거나 나중에 표시되도록 예약 될 수 있습니다.
이 기사에서는 로컬 알림 기능을 사용하여 특정 시간에 매일 알림을 사용자에게 보냅니다.
전제 조건이 학습서에는 React Native에 대한 기본 지식이 필요합니다. 개발 머신을 설정하려면 여기 의 공식 안내서를 따르십시오 .React Native 애플리케이션에서 푸시 알림을 구현하기 위해 react-native-firebase 를 사용할 것 입니다.
React Native Firebase에는 원격 (FCM) 및 로컬 알림을 모두 지원하는 알림 모듈이 있습니다.
동일한 페이지에 있는지 확인하기 위해이 학습서에 사용 된 버전은 다음과 같습니다.
노드 v10.15.0
npm 6.4.1
원사 1.16.0
반응 네이티브 0.59.9
반응 네이티브 파이어베이스 5.2.3
시작하기
를 사용하여 새 프로젝트를 만들려면 react-native-cli 터미널에 다음을 입력하십시오.
$ react-native init localReminders $ cd localReminders
React Native Firebase 설치하십시오 .
iOS 및 Android 설정을 모두 완료했는지 확인하십시오.
모듈 설치
React Native Firebase는 애플리케이션에 핵심 기능에 대한 액세스 권한 만 제공합니다.
반응 네이티브 앱에서 사용자 알림을 받으려면 클라우드 메시징 및 알림 모듈 을 설치해야합니다 .다음 지침에 따라 Cloud Messaging 을 설치 하십시오 .
다시 한 번 iOS와 Android의 단계를 모두 수행했는지 확인하십시오.
초기 코드 설정
App.js
파일에서 다음 가져 오기를 추가하십시오.
import "React"에서 React, {Component}; "react-native"에서 {Alert} 가져 오기; "react-native-firebase"에서 firebase를 가져옵니다. "./src/Dashboard"에서 대시 보드 가져 오기;
폴더에 빈 Dashboard.js 파일을 만듭니다
src
이 자습서의 뒷부분에서이 코드를 코드로 채웁니다.
이제 다음과 같은 class 컴포넌트를 작성하십시오
App
.
componentDidMount
라이프 사이클 메소드에서 호출 한이 클래스 컴포넌트에서 몇 가지 헬퍼 메소드를 작성했습니다
렌더에서는 Dashboard 컴포넌트를 반환합니다
.
이러한 메소드에 코드를 검토하고 추가하여 이들이 수행하는 작업과 필요한 이유를 확인하십시오.
Android 알림 채널 만들기
Android 8.0 (API 레벨 26)부터 알림은 알림 채널을 지정해야합니다. 그렇지 않으면 알림 채널이 나타나지 않습니다.
React Native Firebase가 모든 Android 버전에서 원활하게 작동하도록하려면 알림을 표시하기 전에 채널을 만들어야합니다. 이 코드 블록은 여러 번 다시 실행할 수 있으므로 응용 프로그램이 시작될 때마다 안전하게 수행 할 수 있습니다.
이 알림 채널을 만들기 위해 맞춤형 도우미 메소드를 만들었습니다
createNotificationChannel()
.
다음과 같이 업데이트하십시오.
안드로이드 채널은 세 개의 매개 변수를 받아
channelId
,
name 하고
importance
.전체 참조 문서는 AndroidNotifications 를 참조하십시오 .
알림 권한 및 리스너
알림을 보내기 전에 알림 권한이 있는지 확인한 다음 해당 권한이 있으면 알림 리스너를 추가 할 수 있습니다. 이 알림 리스너는 모든 알림을 notification 수신하고 수신되면 리턴 합니다.
checkPermission() 다음과 같이 분석법을 업데이트하십시오
.
알림 리스너가 알림을 받으면 수신 된 displayNotification() 메소드를 호출 notification 하여 알림을 표시합니다.
이제 알림을 받고 표시 할 수 있습니다. 이제 미래에 어느 시점에 시작될 로컬 알림을 예약 할 차례입니다.
대시 보드 화면
대시 보드 화면 을 만들 겠습니다 . 알림을 활성화 및 비활성화하는 스위치와 알림을받을 시간을 설정하는 시간 선택기가 있습니다. 다음과 같이 보일 것입니다 :
알림 설정 화면
이 UI 화면을 만들기 위해 타사 도우미 라이브러리를 몇 개 추가합니다.moment — 처리 날짜 개체 react-native-modal-datetime-picker — Android 및 iOS 용 반응 형 네이티브 날짜 / 시간 선택기
필요한 가져 오기를 추가하는 것으로 시작하겠습니다 :
이제 사용자가 대시 보드에 도착하자마자 미리 알림을 설정하려고합니다. 따라서 수명주기 메소드
setReminder() 에 대한 메소드를 작성하고 호출합니다
componentDidMount() 에서 setReminder() 방법, 우리는 먼저 사용 할 수 있습니다
notificationTime 및 enableNotification 상태.경우 enableNotification사실 우리가 사용하는 통지를 예약 scheduleNotfication방법. 는 scheduleNotification() 두 개의 매개 변수를 가지고 notification
와 schedule 이를 위해 알림을 반환 하고 , 및 키를 사용 하여 객체를 전달하는 notification 또 다른 사용자 지정 메소드를 호출 합니다.
buildNotification()
schedule
fireDate
repeatInterval
exact
는 fireDate 통지가 제 밀리 도시되어야하는 경우 일 것이다.
들어 repeatInterval 우리가 사용하는 것 day , 우리가 원하는대로 통지는 매일 표시합니다. 이 exact
옵션은 Android에만 해당되며
fireDate
, 알림을 정확하게 받거나 배터리를 절약하기 위해 약간 벗어날 수 있는지 여부를 나타냅니다
.
그렇지 않으면 우리는 그냥 반환 false 합니다. 이제 buildNotification() 알림을받을 때 알림을 작성하는 메소드를 추가하겠습니다
.
알림 switch 및 시간 선택기에 대한 도우미 메소드를 추가해 보겠습니다
이들은 각각의 구성 요소에서 로컬 상태를 설정하는 데 사용되며 나중에 사용됩니다.
마지막으로 render(), 대시 보드의 UI를 반환합니다. UI를 더욱 매력적으로 만들기 위해 일부 스타일을 뿌릴 시간입니다. 그게 다야. 개발이 끝났습니다. 다음 섹션에서는 iOS 시뮬레이터에서 테스트 해 보겠습니다.
앱 실행
알림을 활성화하고 향후 1 분 동안 시간을 설정하여 앱을 테스트하십시오.
참고 : 때때로 알림이 정확한 시간에 표시되지 않을 수 있습니다. 알림이 표시 될 때까지 1 분 정도 기다리십시오.
iOS 및 Android 용 React Native 앱에서 매일 로컬 푸시 알림을 예약 할 수 있습니다.firebase 외에도 react-native-push-notification 과 같은 로컬 푸시 알림을 구현하는 데 사용할 수있는 다른 라이브러리가 있습니다 .
