رياكت نيتيف (إكسبو)

ما هو 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.8,
  "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 عبر واجهة سطر الأوامر:
```
npx lingo.dev@latest login
```
قم بتشغيل خط أنابيب الترجمة:
```
npx lingo.dev@latest run
```
ستقوم واجهة سطر الأوامر بإنشاء ملف 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.
قم بالتبديل بين اللغات المتاحة.