Özet - Çoklu dil

i18next, useTranslation ve dil değiştirmeyi birleştirerek çok dilli bir uygulama yazarsın.

Özet - Çoklu dil

Bu grupta i18n, i18next, çeviri dosyaları, useTranslation ve dil değiştirmeyi gördün. Çok dilli bir uygulama şöyle çalışır: i18next.init ile başlatılır, çeviriler JSON dosyalarında tutulur, bileşenler useTranslation ile t alır, kullanıcı changeLanguage ile dil seçer.

Son derste tüm parçaları birleştiren bir bileşen yazacaksın. Bu bileşen useTranslation kullanacak, bir metni çevirecek ve dil değiştirme düğmesi içerecek. Böylece çok dilli yapının nasıl çalıştığını uçtan uca göreceksin.

Uygulama Çok dilli bileşen yaz

Bir App bileşeni yaz. useTranslation'dan t ve i18n al. Bir Text içinde t('greeting') göstersin. Bir TouchableOpacity'un onPress'inde i18n.changeLanguage('en') çağrısı yapsın.

Örnek çözümü göster

import React from 'react';
import { Text, TouchableOpacity, View } from 'react-native';
import { useTranslation } from 'react-i18next';

function App() {
  const { t, i18n } = useTranslation();
  return (
    <View>
      <Text>{t('greeting')}</Text>
      <TouchableOpacity onPress={() => i18n.changeLanguage('en')}>
        <Text>EN</Text>
      </TouchableOpacity>
    </View>
  );
}

Uygulama Çeviri dosyasını genişlet

Bir tr.json içeriği yaz. "greeting" anahtarı "Merhaba", "farewell" anahtarı "Hoşça kal" değerini taşısın.

Örnek çözümü göster

{
  "greeting": "Merhaba",
  "farewell": "Hoşça kal"
}

Kendini test et

Dil değiştirme hangi yöntemle yapılır?
```
i18n.changeLanguage(?)
```
- changeLanguage
- useTranslation
- init
- fallbackLng
Cevabı göster

changeLanguage — changeLanguage dili değiştirir.
Parçayı rolüne eşle

i18next.init

Başlatma
useTranslation

t verir
changeLanguage

Dil değiştirir
tr.json

Türkçe çeviriler

Sıradaki ders: Code obfuscation

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler