React Native (Expo) - Lingo.dev CLI

ما هو Expo؟

Expo هو إطار عمل ومنصة لإنشاء تطبيقات React Native. يوفر أدوات وخدمات لبناء ونشر وتطوير تطبيقات iOS وAndroid والويب من نفس قاعدة كود JavaScript.

ما هو Lingo.dev CLI؟

Lingo.dev هي منصة ترجمة مدعومة بالذكاء الاصطناعي. يقرأ Lingo.dev CLI الملفات المصدرية، ويرسل المحتوى القابل للترجمة إلى نماذج اللغة الكبيرة، ويكتب الملفات المترجمة مرة أخرى إلى مشروعك.

حول هذا الدليل

يشرح هذا الدليل كيفية إعداد Lingo.dev CLI في مشروع React Native باستخدام Expo. ستتعلم كيفية إنشاء مشروع باستخدام Expo، وتكوين خط أنابيب الترجمة، وعرض النتائج.

الخطوة 1. إعداد مشروع Expo

إنشاء تطبيق Expo جديد:
```
npx create-expo-app@latest my-app
```
الانتقال إلى دليل المشروع:
```
cd my-app
```

تثبيت تبعيات الترجمة:

npx expo install expo-localization
npx expo install i18n-js

الخطوة 2. إنشاء المحتوى المصدري

إنشاء دليل لتخزين المحتوى القابل للترجمة:
```
mkdir -p app/i18n
```

إنشاء ملف يحتوي على بعض المحتوى القابل للترجمة (مثل app/i18n/en.json):

{
  "home": {
    "title": "Welcome",
    "subtitle": "This text is translated by Lingo.dev"
  },
  "cta": "Get started"
}

الخطوة 3. تكوين CLI

في جذر المشروع، قم بإنشاء ملف i18n.json:

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {
    "json": {
      "include": ["app/i18n/[locale].json"]
    }
  }
}

يحدد هذا الملف:

الملفات التي يجب على Lingo.dev CLI ترجمتها
اللغات المراد الترجمة بينها

في هذه الحالة، يترجم الإعداد ملفات JSON من الإنجليزية إلى الإسبانية.

من المهم ملاحظة أن:

[locale] هو عنصر نائب يتم استبداله في وقت التشغيل. يضمن قراءة المحتوى من موقع واحد (مثل app/i18n/en.json) وكتابته إلى موقع مختلف (مثل app/i18n/es.json).
يدعم Lingo.dev CLI تنسيقات ملفات متنوعة بما في ذلك JSON وMDX والمزيد.

لمعرفة المزيد، راجع إعداد i18n.json.

الخطوة 4. ترجمة المحتوى

سجل للحصول على حساب Lingo.dev.
سجل الدخول إلى Lingo.dev عبر CLI:
```
npx lingo.dev@latest login
```
شغّل خط أنابيب الترجمة:
```
npx lingo.dev@latest run
```
سينشئ CLI ملف app/i18n/es.json لتخزين المحتوى المترجم وملف i18n.lock لتتبع ما تمت ترجمته (لمنع إعادة الترجمة غير الضرورية).

الخطوة 5. استخدام الترجمات

في ملف tsconfig.json، فعّل استيراد JSON:

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "resolveJsonModule": true
  }
}

أنشئ دالة تحمّل المحتوى المترجم للغة محددة:

// app/lib/i18n.ts
import { getLocales } from "expo-localization";
import { I18n } from "i18n-js";

import en from "../i18n/en.json";
import es from "../i18n/es.json";

const i18n = new I18n({ en, es });

i18n.defaultLocale = "en";
i18n.enableFallback = true;
i18n.locale = getLocales()[0]?.languageCode ?? "en";

export default i18n;

استخدم الدالة لعرض المحتوى المترجم:

// App.tsx
import { useState } from "react";
import { View, Text, Pressable } from "react-native";
import i18n from "./app/lib/i18n";

export default function App() {
  const [locale, setLocale] = useState(i18n.locale);

  const toggleLocale = () => {
    const next = locale === "en" ? "es" : "en";
    i18n.locale = next;
    setLocale(next);
  };

  return (
    <View>
      <Text>{i18n.t("home.title")}</Text>
      <Text>{i18n.t("home.subtitle")}</Text>

      <Pressable onPress={toggleLocale}>
        <Text>
          {locale === "en" ? "Switch to Español" : "Cambiar a English"}
        </Text>
      </Pressable>
    </View>
  );
}

شغّل خادم التطوير:
```
npx expo start
```
انتقل إلى http://localhost:8081.
بدّل بين اللغات المتاحة.