useTranslation
- React Native kursu
- Uzman
- Ders 34/47
- 5 dk
useTranslation hook'unu öğrenirsin.
useTranslation hook'u
useTranslation, react-i18next'in sağladığı bir hook'tür. Bileşende t fonksiyonuna ulaşmanın en temiz yoludur. Props ile t taşımak yerine her bileşen kendi çevirisini çağırır.
Kullanım: const { t } = useTranslation();. Sonra <Text>{t('hello')}</Text> yazarsın. Hook, aktif dile göre t'yi döndürür; dil değişince bileşen otomatik yeniden render olur. Bu, props drilling'i ortadan kaldırır. useTranslation ayrıca i18n nesnesi de döndürür; dil değiştirme için kullanılır.
Uygulama useTranslation kullan
Bir Greeting bileşeni yaz. useTranslation() çağırıp t alın. <Text>{t('hello')}</Text> döndürsün.
Başlangıç kodu
import React from 'react';
import { Text } from 'react-native';
import { useTranslation } from 'react-i18next';
function Greeting() {
// useTranslation çağrısı ve Text dönüşü
return <Text>Sabit</Text>;
}Örnek çözüm
import React from 'react';
import { Text } from 'react-native';
import { useTranslation } from 'react-i18next';
function Greeting() {
const { t } = useTranslation();
return <Text>{t('hello')}</Text>;
}t fonksiyonu parametreleri
t fonksiyonu yalnızca anahtar almaz; parametre de alır. Örneğin t('welcome', { name: 'Ayşe' }) çağrısı çevirideki {{ name }} yerini doldurur. Çeviri: "welcome": "Hoş geldin, {{name}}".
Sonuç: "Hoş geldin, Ayşe". Bu interpolation olarak bilinir. Çoğullama da desteklenir: t('item', { count: 3 }). Çeviri dosyasında "item_one": "bir öğe", "item_other": "{{count}} öğe" tanımlanır. Bu sayede dinamik metinler temiz kalır; string birleştirme yapmazsın.
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 useTranslation ne döndürür?
const { t, i18n } = useTranslation();- Boş nesne
- Yalnızca i18n
- Yalnızca t
- t ve i18n Doğru cevap
Açıklama: useTranslation hem t hem i18n döndürür.
2 useTranslation çağrısı
const { ____ } = useTranslation();const { t } = useTranslation();Açıklama: Destructuring ile alınır.
3 Parçayı rolüne eşle
| Kavram | Anlamı |
|---|---|
useTranslation |
Hook |
t |
Çeviri döndürür |
i18n |
Dil yönetir |
react-i18next |
Kütüphane |