React Native용 메시지 인박스 설정

Pushwoosh React Native 플러그인은 푸시 알림에 사용되는 동일한 pushwoosh-react-native-plugin 패키지의 일부로 메시지 인박스(“종 모양 아이콘” 앱 인박스)를 제공합니다. 추가 설치 단계는 필요하지 않습니다.

전제 조건

기본 Pushwoosh React Native SDK가 이미 통합되어 푸시를 보내고 있어야 합니다.

인박스 표시

import Pushwoosh from 'pushwoosh-react-native-plugin';

Pushwoosh.presentInboxUI();

presentInboxUI()는 React 뷰 트리 외부에서 SDK의 기본 모양을 가진 네이티브 화면(iOS에서는 뷰 컨트롤러, Android에서는 액티비티)을 표시합니다.

스타일 사용자 지정

스타일 객체를 presentInboxUI()에 전달합니다. 색상 값은 React Native의 processColor()를 거쳐야 합니다. 모든 키는 선택 사항입니다:

키	사용자 지정 항목
`dateFormat`	날짜 형식
`defaultImageIcon`	이미지가 없는 메시지 옆의 기본 아이콘
`unreadImage`	읽지 않은 메시지 표시 (iOS 전용)
`listErrorImage`	목록 로딩 실패 시 표시
`listEmptyImage`	목록에 메시지가 없을 때 표시
`listErrorMessage`	오류 텍스트 (현지화되지 않음)
`listEmptyMessage`	빈 목록 텍스트 (현지화되지 않음)
`defaultTextColor`	기본 텍스트 색상 (iOS 전용)
`accentColor`	강조 색상
`backgroundColor`	배경 색상
`highlightColor`	선택 색상
`titleColor`	메시지 제목 색상
`readTitleColor`	읽은 메시지의 제목 색상 (Android 전용)
`descriptionColor`	메시지 설명 색상
`readDescriptionColor`	읽은 메시지의 설명 색상 (Android 전용)
`dateColor`	메시지 날짜 색상
`readDateColor`	읽은 메시지의 날짜 색상 (Android 전용)
`dividerColor`	구분선 색상
`barBackgroundColor`	제목 표시줄의 배경 색상
`barAccentColor`	제목 표시줄의 뒤로가기 버튼 색상
`barTextColor`	제목 표시줄의 텍스트 색상

import Pushwoosh from 'pushwoosh-react-native-plugin';
import { processColor } from 'react-native';

Pushwoosh.presentInboxUI({
    dateFormat: "dd.MM.yyyy",
    accentColor: processColor('#3498db'),
    backgroundColor: processColor('#ffffff'),
    titleColor: processColor('#333333'),
    descriptionColor: processColor('#666666'),
    listEmptyMessage: "No messages yet"
});

프로그래밍 방식으로 메시지 관리

내장된 화면을 열지 않고 메시지 목록, 읽은 횟수를 로드하고 개별 메시지에 대한 작업을 수행합니다. 이는 사용자 지정 인박스 UI나 읽지 않음 배지에 유용합니다:

Pushwoosh.loadMessages(
    (messages) => {
        messages.forEach((msg) => {
            console.log(msg.title + ": " + msg.message);
        });
    },
    (error) => console.error("Failed to load: " + error)
);

Pushwoosh.unreadMessagesCount((count) => {
    console.log("Unread messages: " + count);
});

Pushwoosh.messagesCount((count) => { /* 총 메시지 수 */ });
Pushwoosh.messagesWithNoActionPerformedCount((count) => { /* 아직 조치되지 않음 */ });

Pushwoosh.readMessage(messageId);
Pushwoosh.deleteMessage(messageId);
Pushwoosh.performAction(messageId); // 메시지의 기본 작업(예: URL 열기)을 실행합니다