ข้ามไปยังเนื้อหา
คู่มือผู้ใช้ คู่มือวิธีการ การสนับสนุน ขอสาธิต เข้าสู่ระบบ
Pushwoosh.com

การตั้งค่า Message Inbox สำหรับ React Native

ปลั๊กอิน Pushwoosh React Native มาพร้อมกับ Message Inbox (App Inbox ที่มี “ไอคอนรูประฆัง”) ซึ่งเป็นส่วนหนึ่งของแพ็คเกจ pushwoosh-react-native-plugin เดียวกันกับที่ใช้สำหรับ push notifications ไม่จำเป็นต้องมีขั้นตอนการติดตั้งเพิ่มเติม

ข้อกำหนดเบื้องต้น

Anchor link to

แสดง inbox

Anchor link to
import Pushwoosh from 'pushwoosh-react-native-plugin';


Pushwoosh.presentInboxUI();

presentInboxUI() จะแสดงหน้าจอแบบเนทีฟ (view controller บน iOS, Activity บน Android) นอก React view tree โดยใช้ลักษณะหน้าตาเริ่มต้นของ SDK

ปรับแต่งสไตล์

Anchor link to

ส่งอ็อบเจกต์สไตล์ไปยัง presentInboxUI() ค่าสีต้องผ่าน processColor() ของ React Native ทุกคีย์เป็นทางเลือก:

คีย์ปรับแต่ง
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: "ยังไม่มีข้อความ"
});

จัดการข้อความผ่านโปรแกรม

Anchor link to

โหลดรายการข้อความ, จำนวนที่ยังไม่ได้อ่าน, และดำเนินการกับข้อความแต่ละรายการโดยไม่ต้องเปิดหน้าจอที่มาพร้อมกับ SDK ซึ่งมีประโยชน์สำหรับการสร้าง UI ของ inbox แบบกำหนดเองหรือป้ายแสดงจำนวนที่ยังไม่ได้อ่าน:

Pushwoosh.loadMessages(
    (messages) => {
        messages.forEach((msg) => {
            console.log(msg.title + ": " + msg.message);
        });
    },
    (error) => console.error("โหลดไม่สำเร็จ: " + error)
);


Pushwoosh.unreadMessagesCount((count) => {
    console.log("ข้อความที่ยังไม่ได้อ่าน: " + count);
});


Pushwoosh.messagesCount((count) => { /* ข้อความทั้งหมด */ });
Pushwoosh.messagesWithNoActionPerformedCount((count) => { /* ยังไม่ได้ดำเนินการ */ });


Pushwoosh.readMessage(messageId);
Pushwoosh.deleteMessage(messageId);
Pushwoosh.performAction(messageId); // เรียกใช้การกระทำเริ่มต้นของข้อความ เช่น การเปิด URL