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

GitHub'da Uygulama Şablonuna bakın.

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. Adım: Bağımlılıkları Kurun

GitHub'da Uygulama Şablonu konusuna bakın.

React Native projenizden aşağıdaki paketleri yükleyin:

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

Paketler

• ara katman Yapılandırma, sözlük içeriği, tür oluşturma ve CLI komutları için temel i18n araç seti.

• tepki katmanı Yerel ayarları edinmek ve değiştirmek için React Native'de kullanacağınız içerik sağlayıcıları ve React kancalarını sağlayan React entegrasyonu.

• tepki-yerel-intlayer Intlayer'ı React Native paketleyiciyle entegre etmek için Metro eklentisini sağlayan React Native entegrasyonu.

1. 1

   Bağımlılıkları Kurma

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

   bash

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   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.

   ---

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);})();

4. 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.

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

   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-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

   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-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!