نقوم بتثبيت المكتبات اللازمة:
expo install expo-notifications expo-permissions
بعد ذلك عليك إنشاء ملف لإدارة الإشعارات (مثلاً: NotificationManager.js) وضعي به الكود التالي:
import * as Notifications from 'expo-notifications';
import * as Permissions from 'expo-permissions';
export async function registerForPushNotificationsAsync() {
const { status: existingStatus } = await Permissions.getAsync(Permissions.NOTIFICATIONS);
let finalStatus = existingStatus;
if (existingStatus !== 'granted') {
const { status } = await Permissions.askAsync(Permissions.NOTIFICATIONS);
finalStatus = status;
}
if (finalStatus !== 'granted') {
console.log('Permission to receive push notifications denied');
return;
}
const tokenData = await Notifications.getExpoPushTokenAsync();
const token = tokenData.data;
return token;
}
export async function sendNotification(title, body) {
const token = await registerForPushNotificationsAsync();
await Notifications.scheduleNotificationAsync({
content: {
title: title,
body: body,
data: { data: 'goes here' },
},
trigger: null,
to: token,
});
}
الآن تستطيعي استخدام ذلك الملف في مكان آخر في تطبيقك لإرسال الإشعارات، وتحديث مكون Picker ليستدعي وظيفة sendNotification عندما يتم اختيار قيمة جديدة، كالتالي:
import React, { useState } from 'react';
import { Picker, View } from 'react-native';
import { sendNotification } from './NotificationManager';
export default function MyComponent() {
const [selectedValue, setSelectedValue] = useState("option1");
const handlePickerChange = (itemValue, itemIndex) => {
setSelectedValue(itemValue);
sendNotification('Picker Selected', `You selected: ${itemValue}`);
};
return (
<View>
<Picker
selectedValue={selectedValue}
onValueChange={handlePickerChange}
>
<Picker.Item label="Option 1" value="option1" />
<Picker.Item label="Option 2" value="option2" />
<Picker.Item label="Option 3" value="option3" />
</Picker>
</View>
);
}