نحوه اجرای ویجت در React Native برای iOS

پس از اجرای ابزارک ها در آخرین پروژه React Native من با نمایشگاه ، تصمیم گرفتم تجربه خود را به اشتراک بگذارم. 🚀 ابزارک ها برنامه خود را از یک نماد ساده به یک تجربه واقعاً مفید تبدیل می کنند و اطلاعات کلیدی را مستقیماً در صفحه اصلی نشان می دهند.
در این آموزش ، من مراحل اصلی ایجاد ابزارک برای دستگاه های iOS را با استفاده از شما نشان خواهم داد واکنشهای گروهی-گروهی، کتابفروشی که کل روند را ساده می کند. ما می خواهیم کد کنیم! 💡
🔥 برای چه خواهد بود؟
✅ می توانید کارهای بعدی خود را بدون باز کردن برنامه مشاهده کنید.
✅ با جدیدترین اطلاعات به طور خودکار به روز می شود.
✅ سریع ، عملی است و در صفحه اصلی باورنکردنی است.
مرحله 1: برنامه React Native خود را با نمایشگاه ایجاد کنید
یادداشت
اگر برنامه React Native خود را با نمایشگاه ایجاد کرده اید ، این مرحله را حذف کنید.
- Expo CLI را نصب کنید (اگر هنوز آن را ندارید):
npm install --global expo-cli
این ابزار به شما امکان می دهد پروژه های نمایشگاه را به راحتی ایجاد و مدیریت کنید.
- با نمایشگاه یک پروژه جدید ایجاد کنید:
expo init MyNewApp
الگویی را که بیشتر دوست دارید (مثلاً “خالی”) انتخاب کنید و منتظر نصب همه واحدها باشید.
- در داخل پوشه پروژه حرکت کنید و برنامه خود را اجرا کنید:
cd MyNewApp
expo start
رابط نمایشگاه در مرورگر شما باز می شود. از آنجا می توانید کد QR را با برنامه Expo Go در دستگاه خود اسکن کنید یا برنامه را در یک شبیه ساز اجرا کنید.
- لیست شما در حال حاضر یک برنامه React Native با اجرای نمایشگاه دارید. احساس راحتی کنید تا یک “سلام جهان” درست کنید تا تأیید کنید که همه چیز در نظم است.
مرحله 2: تهیه پروژه خود برای ابزارک ها در iOS
اگر از نمایشگاه استفاده می کنید یا باید پوشه iOS را از ابتدا تولید کنید ، npx expo prebuild
این بهترین دوست شماست. این دستور نه تنها پوشه را ایجاد می کند ./ios
، اما همچنین تمام پرونده های بومی لازم را با جادوی نمایشگاه پیکربندی می کند.
# Ejecuta este comando en la raíz de tu proyecto
npx expo prebuild --platform ios
یادداشت
prebuild
پوشه شما را کاملاً بازسازی می کندios
، بنابراین اگر پیکربندی های شخصی دارید ، باید بعداً آنها را اصلاح کنید.
PASO 3: Instalar React-Native-Shared-Group Preterences
سپس ، کتابفروشی را نصب کنید که به ما امکان می دهد داده ها را بین برنامه React Native و IOS ویجت به اشتراک بگذاریم:
npm install react-native-shared-group-preferences --save
# o con yarn
yarn add react-native-shared-group-preferences
سپس توان لازم را نصب کنید:
cd ios && pod install
# o
npx pod-install
یادداشت
پس از نصب هر کتابخانه NPM باید اجرا کنیدpod install
بشر
مرحله 4: برنامه گروه ها را در Xcode پیکربندی کنید
1. Abre tu proyecto en Xcode (`ios/TuProyecto.xcworkspace`).
2. Selecciona tu proyecto en el navegador de proyectos.
3. Selecciona la pestaña **Signing & Capabilities**.
4. Haz clic en el botón **+** para añadir una nueva capacidad.
5. Añade **App Groups**.
6. Crea un nuevo grupo con el formato `group.com.tudominio.tuapp`.
7. Asegúrate de que tu App ID tiene habilitada esta capacidad en el portal de desarrolladores de Apple.
مرحله 5: یک ویرایش ویجت را در Xcode ایجاد کنید
1. En Xcode, ve a **File > New > Target**.
2. Selecciona **Widget Extension** de la sección "iOS".
3. Nombra tu widget (por ejemplo, **MyAppWidget**).
4. Selecciona **Include Configuration Intent** si deseas que tu widget sea configurable.
5. Asegúrate de que **Group** esté configurado para el mismo App Group que configuraste previamente.
مرحله ششم: ویجت خود را در Swift پیکربندی کنید
یادداشت
هنگام ایجاد ویجت با Xcode ، پرونده های مختلف Swift در داخل پوشه ایجاد می شوند ./ios/myappwidget ، برای ساده کردن راهنما ما فقط پرونده myopppwidget.swift را ترک خواهیم کرد
پرونده را اصلاح کنید MyAppWidget.swift
(قبلاً MyAppWidget.swift
) تولید شده:
import WidgetKit
import SwiftUI
struct Reminder: Codable, Identifiable {
var id: Int
var name: String
}
struct ReminderWidgetEntry: TimelineEntry {
let date: Date
let reminders: [Reminder]
}
struct ReminderWidgetProvider: TimelineProvider {
func placeholder(in context: Context) -> ReminderWidgetEntry {
ReminderWidgetEntry(date: Date(), reminders: [Reminder(id: 0, name: "Sample Reminder")])
}
func getSnapshot(in context: Context, completion: @escaping (ReminderWidgetEntry) -> ()) {
let entry = ReminderWidgetEntry(date: Date(), reminders: loadReminders())
completion(entry)
}
func getTimeline(in context: Context, completion: @escaping (Timeline<ReminderWidgetEntry>) -> ()) {
let entry = ReminderWidgetEntry(date: Date(), reminders: loadReminders())
let timeline = Timeline(entries: [entry], policy: .after(Date().addingTimeInterval(900)))
completion(timeline)
}
func loadReminders() -> [Reminder] {
let sharedDefaults = UserDefaults(suiteName: "group.com.tudominio.tuapp")
if let jsonString = sharedDefaults?.string(forKey: "reminders"),
let data = jsonString.data(using: .utf8),
let reminders = try? JSONDecoder().decode([Reminder].self, from: data) {
return reminders
}
return []
}
}
struct MyAppWidgetEntryView: View {
var entry: ReminderWidgetProvider.Entry
var body: some View {
VStack(alignment: .leading) {
Text("My Reminders")
.font(.headline)
if entry.reminders.isEmpty {
Text("No reminders")
.font(.caption)
} else {
ForEach(entry.reminders) { reminder in
Text(reminder.name)
.font(.body)
.lineLimit(1)
}
}
}
.padding()
}
}
@main
struct MyAppWidget: Widget {
let kind: String = "MyAppWidget"
var body: some WidgetConfiguration {
StaticConfiguration(kind: kind, provider: ReminderWidgetProvider()) { entry in
MyAppWidgetEntryView(entry: entry)
}
.configurationDisplayName("Widget Reminder Calendar")
.description("Displays a list of your reminders.")
}
}
struct MyAppWidget_Previews: PreviewProvider {
static var previews: some View {
let entry = ReminderWidgetEntry(date: Date(), reminders: [
Reminder(id: 1, name: "Reminder A"),
Reminder(id: 2, name: "Reminder B"),
Reminder(id: 3, name: "Reminder C")
])
MyAppWidgetEntryView(entry: entry)
.previewContext(WidgetPreviewContext(family: .systemMedium))
}
}
مرحله 7: داده های React Native را به اشتراک بگذارید
اکنون ، برنامه React Native خود را اصلاح کنید تا داده ها را با ویجت به اشتراک بگذارید:
import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
import SharedGroupPreferences from 'react-native-shared-group-preferences';
const APP_GROUP_IDENTIFIER = 'group.com.tudominio.tuapp';
export default function UpdateWidget() {
const updateWidgetData = async () => {
const data = [
{ id: 1, name: 'Reminder A' },
{ id: 2, name: 'Reminder B' },
];
await SharedGroupPreferences.setItem(
'reminders',
JSON.stringify(data),
APP_GROUP_IDENTIFIER
);
};
return (
<View style={styles.container}>
<Text style={styles.title}>Update Widget</Text>
<Button
title="Update Widget Now"
onPress={updateWidgetData}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center'
},
title: {
fontSize: 18,
marginBottom: 8
}
});
مرحله 8: در شبیه ساز اجرا کنید
- در Xcode ، در برگه بالا هدف اصلی و شبیه ساز دستگاه.
- en xcode ، ve a محصول> اجرابشر
- آماده! اگر هیچ اشتباهی نداشتید ، باید بتوانید با داده های هماهنگ شده برنامه خود مانند تصویر زیر ویجت اضافه کنید:
پایان
برای همپوشانی برنامه خود آماده هستید؟ 🚀 ابزارک ها زندگی شما را ساده می کنند و اطلاعات اساسی را به شما نشان می دهند گناه باید برنامه را باز کنید. با React Native و react-native-shared-group-preferences
، تبدیل برنامه خود به یک تجربه صفحه اصلی آسانتر از آنچه تصور می کنید است.
بله ، شما باید با Swift کمی کثیف شوید ، اما نتیجه نهایی ارزش هر خط کد را دارد.
برای کدگذاری آن ویجت!
اگر شک دارید ، دریغ نکنید