useTranslation

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.

Örnek çözümü göster

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.

Kendini test et

useTranslation ne döndürür?
```
const { t, i18n } = useTranslation();
```
- Boş nesne
- Yalnızca i18n
- Yalnızca t
- t ve i18n
Cevabı göster

t ve i18n — useTranslation hem t hem i18n döndürür.

useTranslation çağrısı

const { ____ } = useTranslation();

Cevabı göster

const { t } = useTranslation();

Parçayı rolüne eşle

useTranslation

Hook
t

Çeviri döndürür
i18n

Dil yönetir
react-i18next

Kütüphane

Sıradaki ders: Dil değiştirme

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler