localize.dev

الوثائق / React Native and Expo

توطين React Native و Expo، آليًا

ترجمة تطبيق React Native أو Expo: يصبح النص والعناصر النائبة وتسميات إمكانية الوصول استدعاءات t() مع react-i18next، ويتم إعداده بدون واجهات برمجة تطبيقات خاصة بالمتصفح فقط.

كيف يعمل

يتم ترجمة النسخ في <Text> و placeholder و accessibilityLabel و accessibilityHint، لذا تتحدث قارئات الشاشة بلغة المستخدم أيضًا.

يقرأ الإعداد المُنشأ لغة الجهاز باستخدام Intl بدلاً من واجهات برمجة تطبيقات المتصفح، ويعمل مع Expo Router (app/_layout) أو إدخال App كلاسيكي.

قبل وبعد

المخرجات الحقيقية للمحرك لهذا الملف. في تشغيل حقيقي، يقوم النموذج المستضاف بتسمية المفاتيح من السياق.

src/screens/OrderStatus.tsx · قبل
import { Pressable, Text, View } from 'react-native';

export function OrderStatus({ onTrack }) {
  return (
    <View>
      <Text>Your order is on its way</Text>
      <Pressable onPress={onTrack} accessibilityLabel="Track your package">
        <Text>Track package</Text>
      </Pressable>
    </View>
  );
}
src/screens/OrderStatus.tsx · بعد
import { Pressable, Text, View } from 'react-native';
import { useTranslation } from 'react-i18next';

export function OrderStatus({ onTrack }) {
  const { t } = useTranslation();
  return (
    <View>
      <Text>{t('order_status.your_order_is_on_its')}</Text>
      <Pressable onPress={onTrack} accessibilityLabel="Track your package">
        <Text>{t('order_status.track_package')}</Text>
      </Pressable>
    </View>
  );
}
locales/en.json
{
  "order_status": {
    "your_order_is_on_its": "Your order is on its way",
    "track_package": "Track package"
  }
}

ما يضيفه الإعداد

الإعداد الأول يقوم بإعداد react-i18next إذا لم يكن المشروع يحتوي عليه بعد:

  • i18next و react-i18next
  • src/i18n.ts، مستورد من app/_layout أو App أو index

قم بتشغيله

يتطلب CLI إصدار Node.js 22 أو أحدث.

npm install --save-dev localize-dev
npx localize-dev login

# Preview, then write the changes
npx localize-dev run --dry-run -l es,fr,de
npx localize-dev run -l es,fr,de

# Or open a pull request instead
npx localize-dev pr -l es,fr,de

أو أضف إجراء GitHub واحصل على طلب سحب عند كل دفعة. جربه على الكود الخاص بك أولاً في ملعب.