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

İçindekiler

Neden alternatifler yerine Intlayer?

react-native-localize veya i18next gibi ana çözümlerle karşılaştırıldığında Intlayer, aşağıdaki gibi entegre optimizasyonlarla gelen bir çözümdür:

1. 1

   Bağımlılıkları Kurma

   GitHub'da Uygulama Şablonuna bakın.

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

   bash

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   npx intlayer@canary init --interactive    # v9# npx intlayer init                       # v8

   --interactive bayrağı isteğe bağlıdır. Bir yapay zeka aracısıysanız intlayer-cli init kullanın.

   Bu komut ortamınızı algılayacak ve gerekli paketleri yükleyecektir. Örneğin:

   bash

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   npm install intlayer react-native-intlayer

   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-native-intlayer
     React Native entegrasyonu, yerel ayarları elde etmek ve değiştirmek için kullanacağınız bağlam sağlayıcıları ve React kancalarını, React Native polyfill'lerini ve Intlayer'ı React Native paketleyici ile entegre etmek için Metro eklentisini sağlar. react-intlayer'dan her şeyi yeniden dışa aktarır, bu nedenle bir React Native uygulamasında yalnızca bu tek pakete ihtiyaç duyarsınız.

   ---

2. 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:

   intlayer.config.ts

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   /**
    * 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.
3. 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:

   metro.config.js

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

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

   Not: configMetroIntlayer bir promise fonksiyonudur. Eş zamanlı kullanmak istiyorsanız configMetroIntlayerSync kullanın veya IIFE'den (Hemen Çağrılan Fonksiyon İfadesi) kaçının. Not: configMetroIntlayerSync, sunucu başlatıldığında intlayer sözlükleri oluşturmaya izin vermez

4. 4

   Intlayer Sağlayıcısını Ekleyin

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

   Her zaman react-native-intlayer'dan içe aktarın. Onun IntlayerProvider'ı, Intlayer tarafından kullanılan web API'si için polyfill'leri içerir ve paket, react-intlayer'dan tüm hook'ları ve yardımcı programları yeniden dışa aktarır.

   Ayrıca Intlayer'ın düzgün çalışmasını sağlamak için intlayerPolyfill fonksiyonunu index.js dosyanıza eklemeniz gerekir.

   app/_layout.tsx

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   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;

5. 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.jsonc
   • .content.json5
   • .content.ts
   • .content.tsx
   • .content.js
   • .content.jsx
   • .content.mjs
   • .content.mjx
   • .content.cjs
   • .content.md
   • .content.mdx
   • .content.yaml
   • .content.yml
   • vb.

   Expo Router (web): .content.* dosyalarını app/ dizininin dışında tutun. Expo Router, app/ içindeki her JavaScript/TypeScript dosyasını bir rota olarak ele alır. Web'de rota keşfi doğrudan dosya sistemini tarar ve Metro'nun resolver.blockList ayarını dikkate almaz, bu nedenle aynı konumdaki *.content.ts bir rota olarak kaydedilir. app/(tabs)/_layout.content.ts gibi bir dosya bir düzen (layout) olarak bile ayrıştırılır (.content kısmı bir platform eki olarak okunur), bu da gerçek _layout.tsx ile çakışır ve şu hatayı fırlatır:

   plaintext

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   The layouts "./(tabs)/_layout.content.ts" and "./(tabs)/_layout.tsx" conflict on the route "/(tabs)/_layout.content". Remove or rename one of these files.

   Bildirimlerinizi app/ dışında bir dizine yerleştirin (örneğin content/ veya src/content/). Intlayer, .content.* dosyalarını projede herhangi bir yerde keşfeder ve sözlüklere kendi key değerleri üzerinden atıfta bulunulur, bu nedenle içe aktarma değişikliklerine gerek yoktur. Yerel uygulamalarda bu gerekli değildir (Metro'nun blockList ayarı bunları zaten gizler), ancak app/ dışı bir dizin kullanmak her iki platformun da çalışmasını sağlar.

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

   src/app.content.tsx

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   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.

   ---

6. 6

   Bileşenlerinizde Intlayer'ı Kullanın

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

   Örnek

   app/(tabs)/index.tsx

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   import { Image, StyleSheet, Platform } from "react-native";
   import { useIntlayer } from "react-native-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.

   ---

7. 7

   Uygulama Yerel Ayarını Değiştirin

   İsteğe bağlı

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

   src/components/LocaleSwitcher.tsx

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   import { type FC } from "react";
   import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
   import { getLocaleName } from "intlayer";
   import { useLocale } from "react-native-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!

Debug

React Native, React Web'ten daha az stabil olabilir, bu nedenle sürüm uyumuna ekstra dikkat edin.

Intlayer öncelikle Web Intl API'sini hedefler; React Native'de uygun polyfill'leri eklemeniz gerekir.

Kontrol Listesi:

• intlayer ve react-native-intlayer'ın en son sürümlerini kullanın.
• Intlayer polyfill'ini etkinleştirin.
• getLocaleName veya diğer Intl-API tabanlı yardımcı programları kullanıyorsanız, bu polyfill'leri erken aktarın (örneğin index.js veya App.tsx içinde):

import "intl";import "@formatjs/intl-getcanonicallocales/polyfill";import "@formatjs/intl-locale/polyfill";import "@formatjs/intl-pluralrules/polyfill";import "@formatjs/intl-displaynames/polyfill";import "@formatjs/intl-listformat/polyfill";import "@formatjs/intl-numberformat/polyfill";import "@formatjs/intl-relativetimeformat/polyfill";import "@formatjs/intl-datetimeformat/polyfill";

• Modüller çözümlenemezse Metro yapılandırmanızı (resolver takma adları, asset eklentileri, tsconfig yolları) doğrulayın.