الوثائق / React Native and Expo
توطين React Native و Expo، آليًا
ترجمة تطبيق React Native أو Expo: يصبح النص والعناصر النائبة وتسميات إمكانية الوصول استدعاءات t() مع react-i18next، ويتم إعداده بدون واجهات برمجة تطبيقات خاصة بالمتصفح فقط.
كيف يعمل
يتم ترجمة النسخ في <Text> و placeholder و accessibilityLabel و accessibilityHint، لذا تتحدث قارئات الشاشة بلغة المستخدم أيضًا.
يقرأ الإعداد المُنشأ لغة الجهاز باستخدام Intl بدلاً من واجهات برمجة تطبيقات المتصفح، ويعمل مع Expo Router (app/_layout) أو إدخال App كلاسيكي.
قبل وبعد
المخرجات الحقيقية للمحرك لهذا الملف. في تشغيل حقيقي، يقوم النموذج المستضاف بتسمية المفاتيح من السياق.
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>
);
}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>
);
}{
"order_status": {
"your_order_is_on_its": "Your order is on its way",
"track_package": "Track package"
}
}ما يضيفه الإعداد
الإعداد الأول يقوم بإعداد react-i18next إذا لم يكن المشروع يحتوي عليه بعد:
i18nextوreact-i18nextsrc/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 واحصل على طلب سحب عند كل دفعة. جربه على الكود الخاص بك أولاً في ملعب.