managarten/memoro/apps/mobile/features/i18n

Mehrsprachigkeitsunterstützung (i18n) für Memoro

Diese Komponente implementiert die Mehrsprachigkeitsunterstützung (Internationalisierung/i18n) für die Memoro-App mit Hilfe von expo-localization, i18next und react-i18next.

Funktionen

• Automatische Erkennung der Gerätesprache
• Unterstützung für 45 Sprachen
• Persistente Speicherung der Spracheinstellung
• Benutzerfreundliche Sprachauswahl-Komponente
• Vollständige Integration in die App-Einstellungen
• Kulturspezifische Zeit- und Datumsformatierung

Struktur

features/i18n/
├── index.ts                # Hauptkonfiguration für i18next
├── LanguageContext.tsx     # React Context für die Sprachverwaltung
├── LanguageSelector.tsx    # UI-Komponente für die Sprachauswahl
├── translations/           # Übersetzungsdateien
│   ├── de.json             # Deutsche Übersetzungen
│   └── en.json             # Englische Übersetzungen
└── README.md               # Diese Dokumentation

Verwendung

Übersetzungen verwenden

Um Texte in der App zu übersetzen, verwende den useTranslation-Hook:

import { useTranslation } from 'react-i18next';

function MyComponent() {
  const { t } = useTranslation();
  
  return (
    <Text>{t('common.save')}</Text>
  );
}

Sprache ändern

Um die Sprache programmatisch zu ändern, verwende den useLanguage-Hook:

import { useLanguage } from '~/features/i18n/LanguageContext';

function MyComponent() {
  const { changeLanguage } = useLanguage();
  
  const handleChangeLanguage = async (language: string) => {
    await changeLanguage(language);
  };
  
  return (
    <Button onPress={() => handleChangeLanguage('de')}>
      Deutsch
    </Button>
  );
}

Sprachauswahl-Komponente einbinden

Die Sprachauswahl-Komponente kann wie folgt eingebunden werden:

import { useState } from 'react';
import LanguageSelector from '~/features/i18n/LanguageSelector';

function MyComponent() {
  const [isLanguageSelectorVisible, setIsLanguageSelectorVisible] = useState(false);
  
  return (
    <>
      <Button onPress={() => setIsLanguageSelectorVisible(true)}>
        Sprache wählen
      </Button>
      
      <LanguageSelector
        isVisible={isLanguageSelectorVisible}
        onClose={() => setIsLanguageSelectorVisible(false)}
      />
    </>
  );
}

Neue Sprachen hinzufügen

Um eine neue Sprache hinzuzufügen:

1. Erstelle eine neue Übersetzungsdatei in translations/ (z.B. fr.json)
2. Füge die Sprache zur LANGUAGES-Konstante in index.ts hinzu:

export const LANGUAGES = {
  de: { nativeName: 'Deutsch', emoji: '🇩🇪' },
  en: { nativeName: 'English', emoji: '🇬🇧' },
  fr: { nativeName: 'Français', emoji: '🇫🇷' }, // Neue Sprache
};

3. Importiere die neue Übersetzungsdatei in index.ts und füge sie zu den Ressourcen hinzu:

import fr from './translations/fr.json';

// ...

resources: {
  de: { translation: de },
  en: { translation: en },
  fr: { translation: fr }, // Neue Sprache
},

Übersetzungsschlüssel

Die Übersetzungsschlüssel sind hierarchisch organisiert:

• common: Allgemeine Begriffe (Speichern, Abbrechen, etc.)
• auth: Authentifizierungsbezogene Texte
• home: Texte für die Home-Seite
• memo: Texte für Memo-bezogene Funktionen
• settings: Texte für die Einstellungsseite

Zeit- und Datumsformatierung

Die App unterstützt kulturspezifische Zeit- und Datumsformatierung für alle 45 Sprachen.

Zeitformatierung

Die Zeitanzeige wird automatisch an die jeweilige Sprache angepasst:

Sprachen mit speziellen Suffixen/Präfixen:

• 🇩🇪 Deutsch: "19:30 Uhr"
• 🇳🇱 Niederländisch: "19:30 uur"
• 🇩🇰 Dänisch: "kl. 19.30" (mit Punkt-Trenner)
• 🇸🇪 Schwedisch: "kl. 19:30"
• 🇫🇷 Französisch: "19h30"
• 🇧🇬 Bulgarisch: "19:30 ч."
• 🇱🇹 Litauisch: "19:30 val."
• 🇫🇮 Finnisch: "klo 19.30" (mit Punkt-Trenner)
• 🇹🇭 Thailändisch: "19:30 น."
• 🇮🇩 Indonesisch: "19.30" (Punkt statt Doppelpunkt)

12-Stunden-Format Sprachen:

• 🇬🇧 Englisch: "7:30 PM"
• 🇮🇳 Hindi: "7:30 PM"
• 🇵🇰 Urdu: "7:30 PM"
• 🇵🇭 Tagalog: "7:30 PM"
• 🇲🇾 Malaiisch: "7:30 PM"

Einfaches 24-Stunden-Format:

Alle anderen Sprachen verwenden "19:30" ohne Suffix.

Datumsformatierung

Die Datumsanzeige nutzt die native toLocaleDateString() Funktion mit der aktuellen App-Sprache:

// Beispiele:
// Deutsch: "Montag, 7. Januar 2025"
// Englisch: "Monday, January 7, 2025"
// Französisch: "lundi 7 janvier 2025"

Implementierung

Die Zeit- und Datumsformatierung ist in folgenden Dateien implementiert:

• /utils/formatters.ts - Zentrale Formatierungsfunktionen
• /features/memos/utils/dateFormatters.ts - React Hooks für locale-aware Formatierung
• Komponenten nutzen useFormatTime() und useFormatDate() Hooks für konsistente Formatierung

Verwendung in Komponenten

import { useFormatTime, useFormatDate } from '~/features/memos/utils/dateFormatters';

function MyComponent() {
  const formatTime = useFormatTime();
  const formatDate = useFormatDate();
  
  const now = new Date();
  
  return (
    <>
      <Text>{formatDate(now)}</Text>
      <Text>{formatTime(now)}</Text>
    </>
  );
}

Abhängigkeiten

• expo-localization: Für die Erkennung der Gerätesprache
• i18next: Hauptbibliothek für Internationalisierung
• react-i18next: React-Bindings für i18next
• @react-native-async-storage/async-storage: Für die persistente Speicherung der Spracheinstellung