Özet - Çoklu dil
- React Native kursu
- Uzman
- Ders 36/47
- 5 dk
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.
Başlangıç kodu
import React from 'react';
import { Text, TouchableOpacity, View } from 'react-native';
import { useTranslation } from 'react-i18next';
function App() {
// useTranslation ve bileşenleri ekle
return <View />;
}Örnek çözüm
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.
Başlangıç kodu
{
// çeviri anahtarlarını buraya ekle
}Örnek çözüm
{
"greeting": "Merhaba",
"farewell": "Hoşça kal"
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Dil değiştirme hangi yöntemle yapılır?
i18n.changeLanguage(?)- changeLanguage Doğru cevap
- useTranslation
- init
- fallbackLng
Açıklama: changeLanguage dili değiştirir.
2 Parçayı rolüne eşle
| Kavram | Anlamı |
|---|---|
i18next.init |
Başlatma |
useTranslation |
t verir |
changeLanguage |
Dil değiştirir |
tr.json |
Türkçe çeviriler |