برنامه نویسی

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

پس از اجرای ابزارک ها در آخرین پروژه React Native من با نمایشگاه ، تصمیم گرفتم تجربه خود را به اشتراک بگذارم. 🚀 ابزارک ها برنامه خود را از یک نماد ساده به یک تجربه واقعاً مفید تبدیل می کنند و اطلاعات کلیدی را مستقیماً در صفحه اصلی نشان می دهند.

در این آموزش ، من مراحل اصلی ایجاد ابزارک برای دستگاه های iOS را با استفاده از شما نشان خواهم داد واکنشهای گروهی-گروهی، کتابفروشی که کل روند را ساده می کند. ما می خواهیم کد کنیم! 💡


🔥 برای چه خواهد بود؟

✅ می توانید کارهای بعدی خود را بدون باز کردن برنامه مشاهده کنید.
✅ با جدیدترین اطلاعات به طور خودکار به روز می شود.
✅ سریع ، عملی است و در صفحه اصلی باورنکردنی است.


مرحله 1: برنامه React Native خود را با نمایشگاه ایجاد کنید

یادداشت
اگر برنامه React Native خود را با نمایشگاه ایجاد کرده اید ، این مرحله را حذف کنید.

  1. Expo CLI را نصب کنید (اگر هنوز آن را ندارید):
   npm install --global expo-cli
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

این ابزار به شما امکان می دهد پروژه های نمایشگاه را به راحتی ایجاد و مدیریت کنید.

  1. با نمایشگاه یک پروژه جدید ایجاد کنید:
   expo init MyNewApp
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

الگویی را که بیشتر دوست دارید (مثلاً “خالی”) انتخاب کنید و منتظر نصب همه واحدها باشید.

  1. در داخل پوشه پروژه حرکت کنید و برنامه خود را اجرا کنید:
   cd MyNewApp
   expo start
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

رابط نمایشگاه در مرورگر شما باز می شود. از آنجا می توانید کد QR را با برنامه Expo Go در دستگاه خود اسکن کنید یا برنامه را در یک شبیه ساز اجرا کنید.

  1. لیست شما در حال حاضر یک برنامه 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: در شبیه ساز اجرا کنید

  1. در Xcode ، در برگه بالا هدف اصلی و شبیه ساز دستگاه.
  2. en xcode ، ve a محصول> اجرابشر
  3. آماده! اگر هیچ اشتباهی نداشتید ، باید بتوانید با داده های هماهنگ شده برنامه خود مانند تصویر زیر ویجت اضافه کنید:

ویجت بومی

پایان

برای همپوشانی برنامه خود آماده هستید؟ 🚀 ابزارک ها زندگی شما را ساده می کنند و اطلاعات اساسی را به شما نشان می دهند گناه باید برنامه را باز کنید. با React Native و react-native-shared-group-preferences، تبدیل برنامه خود به یک تجربه صفحه اصلی آسانتر از آنچه تصور می کنید است.

بله ، شما باید با Swift کمی کثیف شوید ، اما نتیجه نهایی ارزش هر خط کد را دارد.

برای کدگذاری آن ویجت!

اگر شک دارید ، دریغ نکنید

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا