Erstellen einer Multiplattform-Kalender-App mit React Native

Nach der Initialisierung des Projekts installieren Sie die wesentlichen Abhängigkeiten:

npm install @react-navigation/native @react-navigation/stack
npm install react-native-calendars
npm install react-native-vector-icons
npm install @react-native-async-storage/async-storage
npm install react-native-modal-datetime-picker

Diese Bibliotheken bieten Ihnen Navigation, Kalenderansichten, Symbole, lokalen Speicher und eine Datums- / Uhrzeitauswahl - alles, was Sie zum Erstellen der Benutzeroberfläche benötigen.

Schritt 2: Entwerfen der Benutzeroberfläche

Die Benutzeroberfläche einer Kalender-App muss sauber, reaktionsschnell und intuitiv sein. React Native bietet Kernkomponenten wie , , und , die Sie ausgiebig verwenden werden.

Erstellen des Hauptkalenderbildschirms

Für die Kalenderansicht bietet die Bibliothek anpassbare Komponenten wie und an.

import { Calendar, LocaleConfig } from 'react-native-calendars';

const MyCalendar = ({ onDateChange }) => {
 return (
 <Calendar
 onDayPress={(day) => onDateChange(day.dateString)}
 markedDates={{
 "2025-03-10": { selected: true, marked: true, selectedColor: "blue" }
 }}
 theme={{
 backgroundColor: '#ffffff',
 calendarBackground: '#ffffff',
 textSectionTitleColor: '#b6c1cd',
 selectedDayBackgroundColor: '#00adf5',
 selectedDayTextColor: '#ffffff',
 todayTextColor: '#00adf5',
 dayTextColor: '#2d4150',
 arrowColor: 'orange',
 }}
 />
 );
};

Für Wochen- und Tagesansichten können Sie entweder benutzerdefinierte Komponenten mit mit horizontalem Scrollen erstellen oder die eingebaute -Komponente der Bibliothek nutzen, die einen Wochenagenda-Hybrid bietet. Testen Sie beide Ansätze auf realen Geräten, um die Leistung zu messen.

Hinzufügen von Navigation

Verwenden Sie React Navigation, um Bildschirme zu verwalten: den Hauptkalenderbildschirm, einen Ereignisdetailbildschirm, einen Erstellungs-/Bearbeitungsbildschirm und einen Einstellungsbildschirm.

const Stack = createStackNavigator();

function AppNavigator() {
 return (
 <NavigationContainer>
 <Stack.Navigator initialRouteName="Calendar">
 <Stack.Screen name="Calendar" component={CalendarScreen} />
 <Stack.Screen name="EventDetail" component={EventDetailScreen} />
 <Stack.Screen name="EditEvent" component={EditEventScreen} />
 </Stack.Navigator>
 </NavigationContainer>
 );
}

Ereignisformular UI

Zum Erstellen und Bearbeiten von Ereignissen erstellen Sie ein Formular mit Feldern, einem Datums-/Zeit-Picker (mit ) und einem Umschalter für das Wiederauftreten.

const [title, setTitle] = useState('');
const [startDate, setStartDate] = useState(new Date());
const [showDatePicker, setShowDatePicker] = useState(false);

<View>
 <TextInput placeholder="Event Title" value={title} onChangeText={setTitle} />
 <TouchableOpacity onPress={() => setShowDatePicker(true)}>
 <Text>{startDate.toDateString()}</Text>
 </TouchableOpacity>
 <DateTimePicker
 isVisible={showDatePicker}
 value={startDate}
 onConfirm={(date) => { setStartDate(date); setShowDatePicker(false); }}
 onCancel={() => setShowDatePicker(false)}
 />
</View>

Schritt 3: Umgang mit Ereignissen und Daten

Event data is the heart of your app. You need a robust state management strategy and persistence layer.

Staatsmanagement: Wählen Sie das richtige Werkzeug

Für eine kleine App können die eingebauten und von React ausreichen. Wenn Sie jedoch Synchronisation, Rezidiv und mehrere Bildschirme hinzufügen, sollten Sie Redux Toolkit oder Zustand in Betracht ziehen.

// Example using Context API
const EventContext = React.createContext();

export const EventProvider = ({ children }) => {
 const [events, setEvents] = useState([]);
 const addEvent = (event) => setEvents([...events, event]);
 const updateEvent = (id, updated) => { /* ... */ };
 const deleteEvent = (id) => { /* ... */ };
 return (
 <EventContext.Provider value={{ events, addEvent, updateEvent, deleteEvent }}>
 {children}
 </EventContext.Provider>
 );
};

Wickeln Sie Ihre Root-Komponente mit dem Anbieter.

Lokale Persistenz

Speichern Sie Ereignisse lokal mit AsyncStorage (für einfachen Schlüsselwert) oder SQLite (für relationale Abfragen). AsyncStorage ist während des Prototypings einfacher; SQLite (über ist besser für große Datensätze und Offline-First-Szenarien.

import AsyncStorage from '@react-native-async-storage/async-storage';

const saveEvents = async (events) => {
 try {
 await AsyncStorage.setItem('@events', JSON.stringify(events));
 } catch (e) {
 console.error('Failed to save events', e);
 }
};

Laden Sie Ereignisse beim Start der App und aktualisieren Sie den lokalen Speicher nach jeder Mutation.

Umgang mit wiederkehrenden Ereignissen

Für wiederkehrende Ereignisse haben Sie zwei gemeinsame Strategien:

• Expand on the fly: Speichern Sie ein “Master”-Ereignis mit einer Rezidivregel (d.h. RRULE) und generieren Sie Instanzen, wenn Sie einen Datumsbereich anzeigen. Bibliotheken wie rrule können Rezidiv analysieren und berechnen.
• Instanzen hydrieren: Berechnen und speichern Sie einzelne Ereignisinstanzen für ein rollendes Fenster (z. B. nächste 12 Monate), um Abfragen zu beschleunigen.

Der erste Ansatz ist speichereffizient, erfordert aber eine sorgfältige Datumsberechnung, der zweite ermöglicht schnellere Lesevorgänge, verbraucht aber mehr Platz. Für die meisten Apps funktioniert das Erweitern im laufenden Betrieb mit rrule gut.

Schritt 4: Synchronisieren mit externen Kalendern

Eine der am häufigsten angeforderten Funktionen ist die Synchronisierung mit Google Kalender, Apple Kalender oder Outlook.

Google Kalender Integration

1. Ein Google Cloud Project: Aktivieren Sie die Google Kalender API und erstellen Sie OAuth 2.0-Anmeldeinformationen (Client ID für Mobilgeräte).
2. Verwenden Sie eine Bibliothek wie , um den OAuth-Flow zu verwalten. Diese Bibliothek ermöglicht es Ihnen, den Systembrowser zu öffnen, ein Zugriffstoken zu erhalten und es sicher zu speichern.
3. Make API Requests: Verwenden Sie die REST API (z.B. ), um Ereignisse abzurufen und zu pushen.

import { authorize } from 'react-native-app-auth';

const config = {
 issuer: 'https://accounts.google.com',
 clientId: 'YOUR_CLIENT_ID.apps.googleusercontent.com',
 redirectUrl: 'com.yourapp:/oauthredirect',
 scopes: ['https://www.googleapis.com/auth/calendar'],
};

const authResult = await authorize(config);
// Use authResult.accessToken to call the Google Calendar API

Die Synchronisierung des Apple Kalenders funktioniert ähnlich mit mit Apples Endpunkten. Outlook verwendet Microsofts Graph-API. Speichern Sie Token immer in einem sicheren Speicher (wie ) und aktualisieren Sie sie automatisch.

Umgang mit Konflikten

Bei der bidirektionalen Synchronisierung können Konflikte auftreten (z. B. ein Ereignis wird auf beiden Geräten bearbeitet). Implementieren einer Strategie: Last-Writer-Gewinne ist am einfachsten. Für erweiterte Szenarien zeigen Sie einem Benutzer, wie er auswählen soll, welche Version er behalten möchte.

Schritt 5: Hinzufügen von Push-Benachrichtigungen

Erinnerungen sind für eine Kalender-App unerlässlich. React Native bietet zwei Hauptpfade:

• Firebase Cloud Messaging (FCM) + – funktioniert auf beiden Plattformen.
• Expo-Benachrichtigungen – wenn Sie Expo verwenden, bietet dies eine einfachere API.

Um geplante lokale Benachrichtigungen zu senden, können Sie oder (für fortgeschrittene Android-Kanäle) verwenden, um beispielsweise eine Benachrichtigung 15 Minuten vor einem Ereignis zu planen:

import PushNotification from 'react-native-push-notification';

PushNotification.localNotificationSchedule({
 title: "Upcoming Event",
 message: event.title,
 date: new Date(event.startTime.getTime() - 15 * 60 * 1000),
});

Denken Sie daran, Benachrichtigungsberechtigungen für iOS anzufordern und Android-Kanäle zu konfigurieren.

Schritt 6: Sicherstellung der plattformübergreifenden Kompatibilität

Während React Native viele Unterschiede abstrahiert, werden Sie immer noch auf plattformspezifische Nuancen stoßen.

Verwenden des Plattformmoduls

import { Platform } from 'react-native';

const isIOS = Platform.OS === 'ios';
const paddingTop = isIOS ? 20 : 0;

Verwenden Sie , um plattformspezifische Werte oder Komponenten zurückzugeben.

Responsive Design für unterschiedliche Bildschirmgrößen

Kalendergitter können auf kleinen Bildschirmen überladen werden. Verwenden Sie oder , um Zellengrößen und Schriftgrößen anzupassen.

Leistungsoptimierung

• Virtualisierungslisten: Verwenden Sie mit und für die Agendaansicht.
• Memoize Components: Wrap Kalenderzellen und Ereigniselemente in , um unnötige Wiedergaben zu vermeiden, wenn der Benutzer scrollt.
• Bild- und Animationsbibliotheken: Verwenden Sie für flüssige Animationen, wenn Sie Ansichten wechseln oder Ereignisse erweitern.
• Datenbankabfragen: Wenn Sie SQLite verwenden, werden häufig abgefragte Indexspalten verwendet (z. B. .

Schritt 7: Testen auf Zuverlässigkeit

Eine Kalender-App muss genau und reaktionsschnell sein. Investieren Sie frühzeitig in Tests.

Unit & Integrationstests

• Jest zum Testen von Dienstprogrammfunktionen (Datumsberechnungen, Rezidivlogik, API-Helfer).
• React Native Testing Library zum Testen des Komponentenverhaltens (z. B.: Wird die Ereignisform korrekt dargestellt? Erscheinen markierte Daten?).

End-to-End (E2E) Testing

• Detox für E2E-Tests sowohl auf iOS als auch auf Android. Simulieren Sie Benutzerströme wie das Erstellen eines Ereignisses, das Wechseln von Ansichten und das Abbrechen einer Erinnerung.
• Testen Sie mit realen Geräten und mehreren Betriebssystemversionen. Emulatoren sind nützlich, können aber Verhaltensunterschiede übersehen.

Manuelle Prüfliste

• Zeitzonen-Rand-Fälle – Überschreiten von Tageslichtsparzeitgrenzen.
• Wiederkehrende Ereignisse in Monaten mit unterschiedlicher Länge.
• Synchronisationsverzögerung beim Offline-Modus.
• Genauigkeit der Benachrichtigungszeiten.

Schritt 8: Sicherheitsüberlegungen

Benutzerdaten, insbesondere Kalenderereignisse, sind sensibel.

• Secure Token Storage: Speichern Sie niemals OAuth-Token in AsyncStorage (das nicht verschlüsselt ist).
• API Keys: Betten Sie keine Schlüssel in Ihre Codebasis ein, verwenden Sie bei Bedarf Umgebungsvariablen und einen Backend-Proxy.
• Datenminimierung: Bitten Sie nur die Bereiche an, die notwendig sind (z. B. den E-Mail-Bereich nur, wenn Sie ihn benötigen).
• HTTPS Only: Alle API-Kommunikation muss über TLS erfolgen.

Schritt 9: Bereitstellung in den App Stores

Wenn Sie bereit sind, zu veröffentlichen, folgen Sie plattformspezifischen Richtlinien.

iOS (App Store)

1. Ein Entwicklerkonto einrichten ($ 99 / Jahr).
2. Konfigurieren Sie Info.plist mit Berechtigungen (Kalenderzugriff, Benachrichtigungen).
3. Erstellen Sie die Release-Version mit Xcode: .
4. Laden Sie in App Store Connect hoch und reichen Sie zur Überprüfung ein.

Android (Google Play)

1. Erstellen Sie eine signierte Version APK oder App Bundle.
2. Richten Sie ein Google Play Developer-Konto ein ($ 25 einmalig).
3. Laden Sie das Bundle hoch, füllen Sie den Store-List aus und veröffentlichen Sie.

Continuous Integration / Delivery (CI/CD)

Richten Sie automatisierte Builds mit GitHub Actions, Bitrise oder App Center ein. Beispielsweise kann ein einfacher Workflow Tests für jeden Push ausführen und einen Release Build erstellen, wenn Sie eine Version markieren.

Letzte Tipps für den Erfolg

• Beginn mit einem einfachen MVP Starten Sie mit Tag/Woche/Monat-Ansichten, manueller Ereigniserstellung und lokaler Speicherung. Fügen Sie später Synchronisierung und Benachrichtigungen basierend auf Benutzerfeedback hinzu.
• Priorize accessibility Ensure touch targets are least 44×44 points, support dynamic text sizes, and use proper roles for screen readers.
• Planen Sie zukünftige Funktionen. Architekturentscheidungen (wie die Verwendung von Redux und SQLite) erleichtern das Hinzufügen von Collaboration, AI-gestützten Planungsvorschlägen oder Komplikationen bei Apple Watch/Wear OS.
• Monitor und iterieren Verwenden Sie Crash-Reporting (z. B. Sentry) und Analytics (Firebase Analytics), um zu verstehen, wie Benutzer mit Ihrem Kalender interagieren und wo sie auf Probleme stoßen.

Der Aufbau einer Multi-Plattform-Kalender-App mit React Native ist ein anspruchsvolles, aber lohnendes Projekt. Indem Sie die in diesem Handbuch beschriebenen Schritte befolgen - von der Umgebungseinstellung und dem UI-Design bis hin zur Datensynchronisierung, Leistungsanpassung und Bereitstellung - erstellen Sie eine App, die die Verwaltung von Zeit zu einem nahtlosen Erlebnis für Benutzer in iOS und Android macht. Nutzen Sie das starke Ökosystem, halten Sie die Privatsphäre und Leistung der Benutzer an vorderster Front, und Ihre Kalender-App wird sich in einem überfüllten Markt abheben.

Weiterlesen über die offizielle React Native Dokumentation und den Google Kalender API Guide