Dil değiştirme
- React Native kursu
- Uzman
- Ders 35/47
- 5 dk
Dil değiştirme ve kalıcılık öğrenirsin.
Dil değiştirme
Dil değiştirmek için i18n.changeLanguage('tr') çağrılır. useTranslation bunu i18n olarak döndürür. Çağrı yapılınca tüm bileşenler otomatik yeniden render olur; yeni dile geçilir.
Örnek: const { t, i18n } = useTranslation(); <Button onPress={() => i18n.changeLanguage('en')} />. Burada düğmeye basınca İngilizceye geçilir. Dil seçimi genelde bir menüde sunulur: Türkçe, İngilizce, Almanca. Seçim kalıcı olması için AsyncStorage'a yazılır; uygulama açılınca oradan okunur. Böylece kullanıcı her girişte tercih ettiği dili görür.
Dil tercihini kalıcı yap
Dil tercihini kalıcı yapmak için AsyncStorage kullanılır. Kullanıcı bir dil seçince AsyncStorage.setItem('lang', 'tr') yazılır. Uygulama açılınca AsyncStorage.getItem('lang') okunur ve i18n.changeLanguage ile uygulanır.
Örnek: useEffect(() => { AsyncStorage.getItem('lang').then(l => { if (l) i18n.changeLanguage(l); }); }, []). Bu, her açılışta kayıtlı dili yükler. İlk açılışta kayıt yoksa varsayılan dil kullanılır. Bu desen, kullanıcı deneyimini tutarlı yapar; her girişte aynı dil görünür.
Uygulama Dil değiştirme düğmesi yaz
Bir TouchableOpacity yaz. useTranslation'dan i18n al. onPress içinde i18n.changeLanguage('en') çağrısı yapsın. İçinde Text bileşeni "English" göstersin.
Başlangıç kodu
import React from 'react';
import { TouchableOpacity, Text } from 'react-native';
import { useTranslation } from 'react-i18next';
function LangButton() {
// i18n al ve onPress içinde changeLanguage çağır
return (
<TouchableOpacity onPress={() => {}}>
<Text>English</Text>
</TouchableOpacity>
);
}Örnek çözüm
import React from 'react';
import { TouchableOpacity, Text } from 'react-native';
import { useTranslation } from 'react-i18next';
function LangButton() {
const { i18n } = useTranslation();
return (
<TouchableOpacity onPress={() => i18n.changeLanguage('en')}>
<Text>English</Text>
</TouchableOpacity>
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Dil değiştirmek hangi çağrıyla yapılır?
i18n.?- switch
- translate
- changeLanguage Doğru cevap
- setLang
Açıklama: changeLanguage dili değiştirir.
2 Akışı rolüne eşle
| Kavram | Anlamı |
|---|---|
changeLanguage |
Dili değiştirir |
AsyncStorage |
Tercihi saklar |
getItem |
Kaydı okur |
setItem |
Kaydı yazar |
3 changeLanguage çağrısı
i18n.____('tr');i18n.changeLanguage('tr');Açıklama: changeLanguage dili değiştirir.