Expo ve React Native uygulamanızı çevirin | Uluslararasılaştırma (i18n)

GitHub'da Uygulama Şablonuna bakın.

Intlayer Nedir?

Intlayer, modern uygulamalarda çok dilli desteği basitleştirmek için tasarlanmış yenilikçi, açık kaynaklı bir uluslararasılaştırma (i18n) kütüphanesidir. Birçok JavaScript/TypeScript ortamında çalışır, React Native dahil (react-intlayer paketi aracılığıyla).

Intlayer ile şunları yapabilirsiniz:

• Bileşen düzeyinde bildirimsel sözlükler kullanarak çevirileri kolayca yönetin.
• Otomatik olarak oluşturulan türlerle TypeScript desteği sağlayın.
• UI dizelerini içeren içeriği dinamik olarak yerelleştirin (ve web için React'te, HTML meta verilerini de yerelleştirebilir, vb.).
• Dinamik yerel algılama ve anahtarlama gibi gelişmiş özelliklerden yararlanın.

Adım 1: Bağımlılıkları Kurma

React Native projenizden aşağıdaki paketleri kurun:

npm install intlayer react-intlayernpm install --save-dev react-native-intlayernpx intlayer init

Paketler

• intlayer
  Yapılandırma, sözlük içeriği, tür oluşturma ve CLI komutları için çekirdek i18n araç takımı.

• react-intlayer
  React entegrasyonu, React Native'te yerel ayarları elde etmek ve değiştirmek için kullanacağınız bağlam sağlayıcıları ve React kancalarını sağlar.

• react-native-intlayer
  React Native entegrasyonu, Intlayer'ı React Native paketleyici ile entegre etmek için Metro eklentisini sağlar.

Adım 2: Intlayer Yapılandırması Oluşturma

Proje kökünüzde (veya uygun herhangi bir yerde), bir Intlayer yapılandırma dosyası oluşturun. Şöyle görünebilir:

/**
 * Eğer Locales türleri mevcut değilse, tsconfig.json'da moduleResolution'ı "bundler" olarak ayarlamayı deneyin
 */
import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  internationalization: {
    locales: [
      Locales.ENGLISH,
      Locales.FRENCH,
      Locales.SPANISH,
      // ... Gerektiğiniz diğer yerel ayarları ekleyin
    ],
    defaultLocale: Locales.ENGLISH,
  },
};

export default config;

Bu yapılandırma içinde şunları yapabilirsiniz:

• Desteklenen yerel ayarlarınızın listesini yapılandırın.
• Bir varsayılan yerel ayar belirleyin.
• Daha sonra, daha gelişmiş seçenekler ekleyebilirsiniz (örneğin, günlükler, özel içerik dizinleri, vb.).
• Daha fazla bilgi için Intlayer yapılandırma dokümantasyonuna bakın.

Adım 3: Metro Eklentisini Ekleyin

Metro, React Native için bir paketleyicidir. react-native init komutuyla oluşturulan React Native projeleri için varsayılan paketleyicidir. Metro ile Intlayer'ı kullanmak için, metro.config.js dosyanıza eklentiyi eklemeniz gerekir:

const { getDefaultConfig } = require("expo/metro-config");const { configMetroIntlayer } = require("react-native-intlayer/metro");module.exports = (async () => {  const defaultConfig = getDefaultConfig(__dirname);  return await configMetroIntlayer(defaultConfig);})();

Adım 4: Intlayer Sağlayıcısını Ekleyin

Uygulamanız genelinde kullanıcı dilini senkronize tutmak için, kök bileşeninizi react-intlayer-native'den gelen IntlayerProvider bileşeni ile sarmanız gerekir.

react-intlayer yerine react-native-intlayer'dan gelen sağlayıcıyı kullandığınızdan emin olun. react-native-intlayer'dan gelen dışa aktarım, web API'si için polyfill'leri içerir.

import { Stack } from "expo-router";
import { getLocales } from "expo-localization";
import { IntlayerProvider } from "react-native-intlayer";
import { type FC } from "react";

const getDeviceLocale = () => getLocales()[0]?.languageTag;

const RootLayout: FC = () => {
  return (
    <IntlayerProvider defaultLocale={getDeviceLocale()}>
      <Stack>
        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
      </Stack>
    </IntlayerProvider>
  );
};

export default RootLayout;

Adım 5: İçeriğinizi Bildirin

Projenizde herhangi bir yerde içerik bildirim dosyaları oluşturun (genellikle src/ içinde), Intlayer'ın desteklediği uzantı formatlarından herhangi birini kullanarak:

• .content.json
• .content.ts
• .content.tsx
• .content.js
• .content.jsx
• .content.mjs
• .content.mjx
• .content.cjs
• .content.cjx
• vb.

Örnek (React Native için TSX düğümleriyle TypeScript):

import { t, type Dictionary } from "intlayer";
import type { ReactNode } from "react";

/**
 * "app" alanımız için içerik sözlüğü
 */
import { t, type Dictionary } from "intlayer";

const homeScreenContent = {
  key: "home-screen",
  content: {
    title: t({
      en: "Welcome!",
      fr: "Bienvenue!",
      es: "¡Bienvenido!",
    }),
  },
} satisfies Dictionary;

export default homeScreenContent;

İçerik bildirimleri hakkında detaylar için Intlayer'ın içerik dokümantasyonuna bakın.

Adım 4: Bileşenlerinizde Intlayer'ı Kullanın

Alt bileşenlerde yerelleştirilmiş içerik almak için useIntlayer kancasını kullanın.

Örnek

import { Image, StyleSheet, Platform } from "react-native";
import { useIntlayer } from "react-intlayer";
import { HelloWave } from "@/components/HelloWave";
import ParallaxScrollView from "@/components/ParallaxScrollView";
import { ThemedText } from "@/components/ThemedText";
import { ThemedView } from "@/components/ThemedView";
import { type FC } from "react";

const HomeScreen = (): FC => {
  const { title, steps } = useIntlayer("home-screen");

  return (
    <ParallaxScrollView
      headerBackgroundColor={{ light: "#A1CEDC", dark: "#1D3D47" }}
      headerImage={
        <Image
          source={require("@/assets/images/partial-react-logo.png")}
          style={styles.reactLogo}
        />
      }
    >
      <ThemedView style={styles.titleContainer}>
        <ThemedText type="title">{title}</ThemedText>
        <HelloWave />
      </ThemedView>
    </ParallaxScrollView>
  );
};

const styles = StyleSheet.create({
  titleContainer: {
    flexDirection: "row",
    alignItems: "center",
    gap: 8,
  },
});

export default HomeScreen;

content.someKey'i dize tabanlı özelliklerde kullandığınızda (örneğin, bir düğmenin titleı veya bir Text bileşeninin childrenı), gerçek dizeyi almak için content.someKey.value çağırın.

Eğer uygulamanız zaten mevcutsa, binlerce bileşeni bir saniye içinde dönüştürmek için Intlayer Compiler'ı extract komutu ile birlikte kullanabilirsiniz.

(İsteğe Bağlı) Adım 5: Uygulama Yerel Ayarını Değiştirin

Bileşenlerinizden yerel ayarları değiştirmek için, useLocale kancasının setLocale metodunu kullanabilirsiniz:

import { type FC } from "react";
import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
import { getLocaleName } from "intlayer";
import { useLocale } from "react-intlayer";

export const LocaleSwitcher: FC = () => {
  const { setLocale, availableLocales } = useLocale();

  return (
    <View style={styles.container}>
      {availableLocales.map((locale) => (
        <TouchableOpacity
          key={locale}
          style={styles.button}
          onPress={() => setLocale(locale)}
        >
          <Text style={styles.text}>{getLocaleName(locale)}</Text>
        </TouchableOpacity>
      ))}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    gap: 8,
  },
  button: {
    paddingVertical: 6,
    paddingHorizontal: 12,
    borderRadius: 6,
    backgroundColor: "#ddd",
  },
  text: {
    fontSize: 14,
    fontWeight: "500",
    color: "#333",
  },
});

Bu, Intlayer içeriği kullanan tüm bileşenlerin yeniden işlenmesini tetikler, artık yeni yerel ayar için çevirileri gösterir.

Daha fazla detay için useLocale dokümantasyonuna bakın.

TypeScript Yapılandırma (TypeScript kullanıyorsanız)

Intlayer, otomatik tamamlama ve çeviri hatalarını yakalamak için gizli bir klasörde (.intlayer varsayılan olarak) tür tanımlarını oluşturur:

// tsconfig.json{  // ... mevcut TS yapılandırmanız  "include": [    "src", // kaynak kodunuz    ".intlayer/types/**/*.ts", // <-- otomatik olarak oluşturulan türlerin dahil edildiğinden emin olun    // ... zaten dahil ettiğiniz başka şeyler  ],}

Bu, aşağıdaki gibi özellikleri etkinleştirir:

• Sözlük anahtarlarınız için otomatik tamamlama.
• Var olmayan bir anahtara eriştiğinizde veya türü eşleşmediğinde sizi uyaran tür kontrolü.

Git Yapılandırma

Intlayer tarafından otomatik olarak oluşturulan dosyaları göndermekten kaçınmak için, .gitignore'nize aşağıdakileri ekleyin:

#  Intlayer tarafından oluşturulan dosyaları yok say.intlayer

VS Code Uzantısı

Intlayer ile geliştirme deneyiminizi geliştirmek için, resmi Intlayer VS Code Uzantısı'nı kurabilirsiniz.

VS Code Marketplace'ten Kurun

Bu uzantı şunları sağlar:

• Çeviri anahtarları için otomatik tamamlama.
• Eksik çeviriler için gerçek zamanlı hata algılama.
• Çevrilmiş içeriğin satır içi önizlemeleri.
• Çevirileri kolayca oluşturmak ve güncellemek için hızlı eylemler.

Uzantının nasıl kullanılacağı hakkında daha fazla detay için, Intlayer VS Code Uzantısı dokümantasyonuna bakın.

Daha Fazla İlerleyin

• Görsel Düzenleyici: Çevirileri görsel olarak yönetmek için Intlayer Görsel Düzenleyici'yi kullanın.
• CMS Entegrasyonu: Sözlük içeriğinizi bir CMS'den harici hale getirebilir ve getirebilirsiniz.
• CLI Komutları: Çevirileri çıkarma veya eksik anahtarları kontrol etme gibi görevler için Intlayer CLI'yi keşfedin.

Intlayer ile tam güçlendirilmiş i18n ile React Native uygulamalarınızı oluşturmanın keyfini çıkarın!