@intlayer/docs 9.0.0-canary.5 → 9.0.0-canary.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/docs/ar/intlayer_with_react_native+expo.md +56 -79
- package/docs/ar/packages/react-native-intlayer/exports.md +48 -14
- package/docs/de/intlayer_with_react_native+expo.md +50 -68
- package/docs/de/packages/react-native-intlayer/exports.md +47 -13
- package/docs/en/intlayer_with_react_native+expo.md +14 -18
- package/docs/en/packages/react-native-intlayer/exports.md +47 -13
- package/docs/en-GB/intlayer_with_react_native+expo.md +40 -94
- package/docs/en-GB/packages/react-native-intlayer/exports.md +51 -18
- package/docs/es/intlayer_with_react_native+expo.md +43 -80
- package/docs/es/packages/react-native-intlayer/exports.md +47 -13
- package/docs/fr/intlayer_with_react_native+expo.md +54 -68
- package/docs/fr/packages/react-native-intlayer/exports.md +47 -13
- package/docs/hi/intlayer_with_react_native+expo.md +90 -87
- package/docs/hi/packages/react-native-intlayer/exports.md +48 -14
- package/docs/id/intlayer_with_react_native+expo.md +45 -33
- package/docs/id/packages/react-native-intlayer/exports.md +47 -13
- package/docs/it/intlayer_with_react_native+expo.md +32 -72
- package/docs/it/packages/react-native-intlayer/exports.md +47 -13
- package/docs/ja/intlayer_with_react_native+expo.md +98 -137
- package/docs/ja/packages/react-native-intlayer/exports.md +47 -14
- package/docs/ko/intlayer_with_react_native+expo.md +231 -29
- package/docs/ko/packages/react-native-intlayer/exports.md +48 -14
- package/docs/pl/intlayer_with_react_native+expo.md +75 -46
- package/docs/pl/packages/react-native-intlayer/exports.md +47 -13
- package/docs/pt/intlayer_with_react_native+expo.md +38 -75
- package/docs/pt/packages/react-native-intlayer/exports.md +47 -13
- package/docs/ru/intlayer_with_react_native+expo.md +71 -60
- package/docs/ru/packages/react-native-intlayer/exports.md +49 -16
- package/docs/tr/intlayer_with_react_native+expo.md +30 -56
- package/docs/tr/packages/react-native-intlayer/exports.md +48 -15
- package/docs/uk/intlayer_with_react_native+expo.md +64 -52
- package/docs/uk/packages/react-native-intlayer/exports.md +47 -13
- package/docs/vi/intlayer_with_react_native+expo.md +43 -32
- package/docs/vi/packages/react-native-intlayer/exports.md +47 -13
- package/docs/zh/intlayer_with_react_native+expo.md +216 -82
- package/docs/zh/packages/react-native-intlayer/exports.md +48 -14
- package/package.json +6 -6
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
2
|
createdAt: 2025-06-18
|
|
3
|
-
updatedAt: 2026-
|
|
3
|
+
updatedAt: 2026-06-25
|
|
4
4
|
title: "تدويل Expo + React Native - الدليل الكامل لترجمة تطبيقك"
|
|
5
5
|
description: "لا مزيد من i18next. دليل 2026 لبناء تطبيق Expo + React Native متعدد اللغات (i18n). ترجم باستخدام وكلاء الذكاء الاصطناعي وحسّن حجم الحزمة وتحسين محركات البحث والأداء."
|
|
6
6
|
keywords:
|
|
@@ -17,6 +17,9 @@ slugs:
|
|
|
17
17
|
applicationTemplate: https://github.com/aymericzip/intlayer-react-native-template
|
|
18
18
|
applicationShowcase: https://intlayer-react-native.vercel.app
|
|
19
19
|
history:
|
|
20
|
+
- version: 9.0.0
|
|
21
|
+
date: 2026-06-25
|
|
22
|
+
changes: "استيراد موفّري السياق والخطافات مباشرةً من react-native-intlayer؛ لم يعد react-intlayer ضروريًا كاعتمادية مباشرة"
|
|
20
23
|
- version: 8.9.0
|
|
21
24
|
date: 2026-05-04
|
|
22
25
|
changes: "تحديث استخدام واجهة برمجة تطبيقات useIntlayer في Solid للوصول المباشر إلى الخصائص"
|
|
@@ -37,7 +40,7 @@ author: aymericzip
|
|
|
37
40
|
<iframe
|
|
38
41
|
src="https://ide.intlayer.org/aymericzip/intlayer-react-native-template?file=intlayer.config.ts"
|
|
39
42
|
className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
|
|
40
|
-
title="Demo CodeSandbox - Intlayer"
|
|
43
|
+
title="Demo CodeSandbox - How to Internationalize your application using Intlayer"
|
|
41
44
|
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
|
|
42
45
|
loading="lazy"
|
|
43
46
|
/>
|
|
@@ -56,88 +59,64 @@ author: aymericzip
|
|
|
56
59
|
</Tab>
|
|
57
60
|
</Tabs>
|
|
58
61
|
|
|
59
|
-
|
|
62
|
+
## جدول المحتويات
|
|
63
|
+
|
|
64
|
+
<TOC/>
|
|
60
65
|
|
|
61
66
|
## لماذا Intlayer على البدائل؟
|
|
62
67
|
|
|
63
68
|
بالمقارنة مع الحلول الرئيسية مثل `react-native-localize` أو `i18next`، يعد Intlayer حلاً يأتي مزودًا بتحسينات متكاملة مثل:
|
|
64
69
|
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
تم تحسين Intlayer للعمل بشكل مثالي مع React Native وExpo من خلال تقديم **نطاق المحتوى على مستوى المكونات**، و**دعم TypeScript**، وجميع الميزات اللازمة لتوسيع نطاق التدويل (i18n) في تطبيقات الأجهزة المحمولة.
|
|
68
|
-
|
|
69
|
-
** الصيانة **
|
|
70
|
+
<AccordionGroup>
|
|
70
71
|
|
|
71
|
-
|
|
72
|
+
<Accordion header="تغطية React Native الكاملة">
|
|
72
73
|
|
|
73
|
-
|
|
74
|
+
تم تحسين Intlayer للعمل بشكل مثالي مع React Native وExpo من خلال تقديم **نطاق المحتوى على مستوى المكونات**، و**دعم TypeScript**، وجميع الميزات اللازمة لتوسيع نطاق التدويل (i18n) في تطبيقات الأجهزة المحمولة.
|
|
74
75
|
|
|
75
|
-
|
|
76
|
+
</Accordion>
|
|
76
77
|
|
|
77
|
-
|
|
78
|
+
<Accordion header="الصيانة">
|
|
78
79
|
|
|
79
|
-
|
|
80
|
+
يؤدي تحديد نطاق محتوى تطبيقك إلى **تسهيل الصيانة** للتطبيقات واسعة النطاق. يمكنك تكرار أو حذف مجلد ميزات واحد دون العبء العقلي لمراجعة قاعدة بيانات المحتوى بالكامل. بالإضافة إلى ذلك، تتم كتابة Intlayer **بالكامل** لضمان دقة المحتوى الخاص بك.
|
|
80
81
|
|
|
81
|
-
|
|
82
|
+
</Accordion>
|
|
82
83
|
|
|
83
|
-
|
|
84
|
+
<Accordion header="وكيل الذكاء الاصطناعي">
|
|
84
85
|
|
|
85
|
-
|
|
86
|
+
يؤدي تحديد موقع المحتوى المشترك إلى **تقليل السياق المطلوب** بواسطة نماذج اللغات الكبيرة (LLMs). يأتي Intlayer أيضًا مزودًا بمجموعة من الأدوات، مثل **CLI** لاختبار الترجمات المفقودة،**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**، **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** و**[مهارات الوكيل](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**، لجعل تجربة المطور (DX) أكثر سلاسة للذكاء الاصطناعي وكلاء.
|
|
86
87
|
|
|
87
|
-
|
|
88
|
+
</Accordion>
|
|
88
89
|
|
|
89
|
-
|
|
90
|
+
<Accordion header="الأتمتة">
|
|
90
91
|
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
<Steps>
|
|
94
|
-
|
|
95
|
-
<Step number={1} title="تثبيت التبعيات">
|
|
92
|
+
استخدم الأتمتة للترجمة في مسار CI/CD الخاص بك باستخدام LLM من اختيارك على حساب مزود الذكاء الاصطناعي الخاص بك. يقدم Intlayer أيضًا **مترجمًا** لأتمتة استخراج المحتوى، بالإضافة إلى [منصة ويب](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) للمساعدة في **الترجمة في الخلفية**.
|
|
96
93
|
|
|
97
|
-
|
|
94
|
+
</Accordion>
|
|
98
95
|
|
|
99
|
-
|
|
96
|
+
<Accordion header="الأداء">
|
|
100
97
|
|
|
101
|
-
|
|
102
|
-
npm تثبيت طبقة رد فعل طبقة داخلية
|
|
103
|
-
تثبيت npm --save-dev رد الفعل الأصلي-inlayer
|
|
104
|
-
npx الطبقة البينية init
|
|
105
|
-
```
|
|
98
|
+
يمكن أن يؤدي ربط ملفات JSON الضخمة بالمكونات إلى حدوث مشكلات في الأداء والتفاعل. يعمل Intlayer على تحسين تحميل المحتوى الخاص بك في وقت الإنشاء.
|
|
106
99
|
|
|
107
|
-
|
|
108
|
-
أضف pnpm طبقة تفاعلية داخلية
|
|
109
|
-
إضافة pnpm --save-dev رد الفعل الأصلي-inlayer
|
|
110
|
-
pnpm intlayer init
|
|
111
|
-
```
|
|
100
|
+
</Accordion>
|
|
112
101
|
|
|
113
|
-
|
|
114
|
-
الغزل إضافة طبقة داخلية رد فعل طبقة داخلية
|
|
115
|
-
إضافة الغزل --save-dev رد الفعل الأصلي-inlayer
|
|
116
|
-
الغزل الضمني الحرف الأول
|
|
117
|
-
```
|
|
102
|
+
<Accordion header="التحجيم مع غير المطورين">
|
|
118
103
|
|
|
119
|
-
|
|
120
|
-
كعكة إضافة طبقة داخلية رد فعل طبقة داخلية
|
|
121
|
-
إضافة كعكة --dev رد الفعل الأصلي-inlayer
|
|
122
|
-
كعكة x الطبقة البينية init
|
|
123
|
-
```
|
|
104
|
+
أكثر من مجرد حل i18n، يوفر Intlayer **[محررًا مرئيًا مستضافًا ذاتيًا](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** و**[نظام إدارة محتوى كامل](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** لمساعدتك في إدارة المحتوى متعدد اللغات في **الوقت الفعلي**، مما يجعل التعاون مع المترجمين ومؤلفي النصوص وأعضاء الفريق الآخرين سلسًا. يمكن تخزين المحتوى محليًا و/أو عن بعد.
|
|
124
105
|
|
|
125
|
-
|
|
106
|
+
</Accordion>
|
|
126
107
|
|
|
127
|
-
|
|
128
|
-
مجموعة أدوات i18n الأساسية للتكوين ومحتوى القاموس وإنشاء الأنواع وأوامر CLI.
|
|
108
|
+
<Accordion header="حجم الحزمة">
|
|
129
109
|
|
|
130
|
-
|
|
131
|
-
تكامل React الذي يوفر موفري السياق وخطافات React التي ستستخدمها في React Native للحصول على اللغات وتبديلها.
|
|
110
|
+
بدلاً من تحميل ملفات JSON ضخمة إلى صفحاتك، قم بتحميل المحتوى الضروري فقط. يساعد Intlayer **في تقليل حجم الحزمة وأحجام العرض بنسبة تصل إلى 50%**.
|
|
132
111
|
|
|
133
|
-
|
|
134
|
-
|
|
112
|
+
</Accordion>
|
|
113
|
+
</AccordionGroup>
|
|
135
114
|
|
|
136
|
-
|
|
115
|
+
<Steps>
|
|
137
116
|
|
|
138
|
-
|
|
117
|
+
<Step number={1} title="تثبيت التبعيات">
|
|
139
118
|
|
|
140
|
-
|
|
119
|
+
راجع [قالب التطبيق](https://github.com/aymericzip/intlayer-react-native-template) على GitHub.
|
|
141
120
|
|
|
142
121
|
من مشروع React Native الخاص بك، قم بتثبيت الحزم التالية:
|
|
143
122
|
|
|
@@ -162,23 +141,19 @@ bunx intlayer-cli init --interactive
|
|
|
162
141
|
> سيقوم هذا الأمر باكتشاف بيئتك وتثبيت الحزم المطلوبة. على سبيل المثال:
|
|
163
142
|
|
|
164
143
|
```bash packageManager="npm"
|
|
165
|
-
npm install intlayer react-intlayer
|
|
166
|
-
npm install --save-dev react-native-intlayer
|
|
144
|
+
npm install intlayer react-native-intlayer
|
|
167
145
|
```
|
|
168
146
|
|
|
169
147
|
```bash packageManager="pnpm"
|
|
170
|
-
pnpm add intlayer react-intlayer
|
|
171
|
-
pnpm add --save-dev react-native-intlayer
|
|
148
|
+
pnpm add intlayer react-native-intlayer
|
|
172
149
|
```
|
|
173
150
|
|
|
174
151
|
```bash packageManager="yarn"
|
|
175
|
-
yarn add intlayer react-intlayer
|
|
176
|
-
yarn add --save-dev react-native-intlayer
|
|
152
|
+
yarn add intlayer react-native-intlayer
|
|
177
153
|
```
|
|
178
154
|
|
|
179
155
|
```bash packageManager="bun"
|
|
180
|
-
bun add intlayer react-intlayer
|
|
181
|
-
bun add --dev react-native-intlayer
|
|
156
|
+
bun add intlayer react-native-intlayer
|
|
182
157
|
```
|
|
183
158
|
|
|
184
159
|
### الحزم
|
|
@@ -186,17 +161,14 @@ bun add --dev react-native-intlayer
|
|
|
186
161
|
- **intlayer**
|
|
187
162
|
مجموعة أدوات i18n الأساسية للتكوين، محتوى القاموس، توليد الأنواع، وأوامر CLI.
|
|
188
163
|
|
|
189
|
-
- **react-intlayer**
|
|
190
|
-
تكامل React الذي يوفر موفري السياق وReact hooks التي ستستخدمها في React Native للحصول على اللغات وتبديلها.
|
|
191
|
-
|
|
192
164
|
- **react-native-intlayer**
|
|
193
|
-
تكامل React Native الذي يوفر
|
|
165
|
+
تكامل React Native الذي يوفر موفّري السياق وReact hooks التي ستستخدمها للحصول على اللغات وتبديلها، وpolyfills لـ React Native، وإضافة Metro لدمج Intlayer مع مجمع React Native. يُعيد تصدير كل شيء من `react-intlayer`، لذلك تحتاج فقط إلى هذه الحزمة الواحدة في تطبيق React Native.
|
|
194
166
|
|
|
195
167
|
---
|
|
196
168
|
|
|
197
169
|
</Step>
|
|
198
170
|
|
|
199
|
-
<Step number={
|
|
171
|
+
<Step number={2} title="إنشاء تكوين Intlayer">
|
|
200
172
|
|
|
201
173
|
في جذر مشروعك (أو في أي مكان مناسب)، أنشئ ملف **تكوين Intlayer**. قد يبدو كالتالي:
|
|
202
174
|
|
|
@@ -230,7 +202,7 @@ export default config;
|
|
|
230
202
|
|
|
231
203
|
</Step>
|
|
232
204
|
|
|
233
|
-
<Step number={
|
|
205
|
+
<Step number={3} title="إضافة ملحق Metro">
|
|
234
206
|
|
|
235
207
|
Metro هو أداة تجميع (bundler) لـ React Native. وهو أداة التجميع الافتراضية لمشاريع React Native التي تم إنشاؤها باستخدام الأمر `react-native init`. لاستخدام Intlayer مع Metro، تحتاج إلى إضافة الملحق إلى ملف `metro.config.js` الخاص بك:
|
|
236
208
|
|
|
@@ -245,13 +217,18 @@ module.exports = (async () => {
|
|
|
245
217
|
})();
|
|
246
218
|
```
|
|
247
219
|
|
|
220
|
+
> ملاحظة: `configMetroIntlayer` هي دالة غير متزامنة (promise). استخدم `configMetroIntlayerSync` بدلاً من ذلك إذا كنت تريد استخدامها بشكل متزامن، أو تجنب IFFE (التعبير الدالي المستدعى فورًا).
|
|
221
|
+
> ملاحظة: `configMetroIntlayerSync` لا تسمح ببناء قواميس Intlayer عند بدء تشغيل الخادم
|
|
222
|
+
|
|
248
223
|
</Step>
|
|
249
224
|
|
|
250
|
-
<Step number={
|
|
225
|
+
<Step number={4} title="إضافة موفّر Intlayer">
|
|
226
|
+
|
|
227
|
+
للحفاظ على مزامنة لغة المستخدم في جميع أنحاء تطبيقك، تحتاج إلى تغليف المكون الجذر الخاص بك بمكون `IntlayerProvider` من `react-native-intlayer`.
|
|
251
228
|
|
|
252
|
-
|
|
229
|
+
> قم دائمًا بالاستيراد من `react-native-intlayer`. يتضمن `IntlayerProvider` الخاص به polyfills لواجهة برمجة تطبيقات الويب المستخدمة بواسطة Intlayer، والحزمة تُعيد تصدير جميع الخطافات والأدوات من `react-intlayer`.
|
|
253
230
|
|
|
254
|
-
|
|
231
|
+
بالإضافة إلى ذلك، تحتاج إلى إضافة دالة `intlayerPolyfill` إلى ملف `index.js` الخاص بك لضمان عمل Intlayer بشكل صحيح.
|
|
255
232
|
|
|
256
233
|
```tsx fileName="app/_layout.tsx" codeFormat={["typescript", "esm"]}
|
|
257
234
|
import { Stack } from "expo-router";
|
|
@@ -276,7 +253,7 @@ export default RootLayout;
|
|
|
276
253
|
|
|
277
254
|
</Step>
|
|
278
255
|
|
|
279
|
-
<Step number={
|
|
256
|
+
<Step number={5} title="إعلان المحتوى الخاص بك">
|
|
280
257
|
|
|
281
258
|
قم بإنشاء ملفات **إعلان المحتوى** في أي مكان داخل مشروعك (عادةً داخل مجلد `src/`)، باستخدام أي من صيغ الامتداد التي يدعمها Intlayer:
|
|
282
259
|
|
|
@@ -347,7 +324,7 @@ export default homeScreenContent;
|
|
|
347
324
|
|
|
348
325
|
</Step>
|
|
349
326
|
|
|
350
|
-
<Step number={
|
|
327
|
+
<Step number={6} title="استخدام Intlayer في مكوناتك">
|
|
351
328
|
|
|
352
329
|
استخدم الخطاف `useIntlayer` في المكونات الفرعية للحصول على المحتوى المحلي.
|
|
353
330
|
|
|
@@ -355,7 +332,7 @@ export default homeScreenContent;
|
|
|
355
332
|
|
|
356
333
|
```tsx fileName="app/(tabs)/index.tsx" codeFormat={["typescript", "esm"]}
|
|
357
334
|
import { Image, StyleSheet, Platform } from "react-native";
|
|
358
|
-
import { useIntlayer } from "react-intlayer";
|
|
335
|
+
import { useIntlayer } from "react-native-intlayer";
|
|
359
336
|
import { HelloWave } from "@/components/HelloWave";
|
|
360
337
|
import ParallaxScrollView from "@/components/ParallaxScrollView";
|
|
361
338
|
import { ThemedText } from "@/components/ThemedText";
|
|
@@ -402,7 +379,7 @@ export default HomeScreen;
|
|
|
402
379
|
|
|
403
380
|
</Step>
|
|
404
381
|
|
|
405
|
-
<Step number={
|
|
382
|
+
<Step number={7} title="تغيير لغة التطبيق" isOptional={true}>
|
|
406
383
|
|
|
407
384
|
لتغيير اللغة من داخل مكوناتك، يمكنك استخدام دالة `setLocale` من الخطاف `useLocale`:
|
|
408
385
|
|
|
@@ -410,7 +387,7 @@ export default HomeScreen;
|
|
|
410
387
|
import { type FC } from "react";
|
|
411
388
|
import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
|
|
412
389
|
import { getLocaleName } from "intlayer";
|
|
413
|
-
import { useLocale } from "react-intlayer";
|
|
390
|
+
import { useLocale } from "react-native-intlayer";
|
|
414
391
|
|
|
415
392
|
export const LocaleSwitcher: FC = () => {
|
|
416
393
|
const { setLocale, availableLocales } = useLocale();
|
|
@@ -487,7 +464,7 @@ const styles = StyleSheet.create({
|
|
|
487
464
|
لتجنب الالتزام بالملفات التي تم إنشاؤها تلقائيًا بواسطة Intlayer، أضف ما يلي إلى ملف `.gitignore` الخاص بك:
|
|
488
465
|
|
|
489
466
|
```bash
|
|
490
|
-
#
|
|
467
|
+
# تجاهل الملفات التي تم إنشاؤها بواسطة Intlayer
|
|
491
468
|
.intlayer
|
|
492
469
|
```
|
|
493
470
|
|
|
@@ -528,7 +505,7 @@ React Native قد يكون أقل استقراراً من React Web، لذلك
|
|
|
528
505
|
|
|
529
506
|
قائمة التحقق:
|
|
530
507
|
|
|
531
|
-
- استخدم أحدث إصدارات `intlayer` و `react-
|
|
508
|
+
- استخدم أحدث إصدارات `intlayer` و `react-native-intlayer`.
|
|
532
509
|
- قم بتفعيل polyfill الخاص بـ Intlayer.
|
|
533
510
|
- إذا كنت تستخدم `getLocaleName` أو أدوات أخرى قائمة على Intl-API، قم باستيراد هذه polyfills مبكراً (على سبيل المثال في `index.js` أو `App.tsx`):
|
|
534
511
|
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
---
|
|
2
2
|
createdAt: 2026-01-21
|
|
3
|
-
updatedAt: 2026-
|
|
3
|
+
updatedAt: 2026-06-25
|
|
4
4
|
title: وثائق حزمة react-native-intlayer
|
|
5
|
-
description: دعم React Native لـ Intlayer، يوفر موفّرين وpolyfills.
|
|
5
|
+
description: دعم React Native لـ Intlayer، يوفر موفّرين وخطافات وpolyfills وتكوين Metro.
|
|
6
6
|
keywords:
|
|
7
7
|
- react-native-intlayer
|
|
8
8
|
- react-native
|
|
@@ -14,6 +14,9 @@ slugs:
|
|
|
14
14
|
- react-native-intlayer
|
|
15
15
|
- exports
|
|
16
16
|
history:
|
|
17
|
+
- version: 9.0.0
|
|
18
|
+
date: 2026-06-25
|
|
19
|
+
changes: "إعادة تصدير واجهة برمجة تطبيقات react-intlayer الكاملة (الخطافات والأدوات ومسارات format/html/markdown الفرعية) حتى يعتمد تطبيق React Native على react-native-intlayer فقط"
|
|
17
20
|
- version: 8.0.0
|
|
18
21
|
date: 2026-01-21
|
|
19
22
|
changes: "توثيق موحد لجميع الصادرات"
|
|
@@ -22,7 +25,9 @@ author: aymericzip
|
|
|
22
25
|
|
|
23
26
|
# حزمة react-native-intlayer
|
|
24
27
|
|
|
25
|
-
توفر حزمة `react-native-intlayer` الأدوات اللازمة لدمج Intlayer في تطبيقات React Native.
|
|
28
|
+
توفر حزمة `react-native-intlayer` الأدوات اللازمة لدمج Intlayer في تطبيقات React Native. تُعيد تصدير واجهة برمجة تطبيقات `react-intlayer` الكاملة (الخطافات والأدوات) مع `IntlayerProvider` جاهز لـ React Native، بالإضافة إلى polyfills وتكوين Metro المطلوبين بواسطة React Native.
|
|
29
|
+
|
|
30
|
+
> في تطبيق React Native، قم باستيراد **كل شيء** من `react-native-intlayer`. لا تحتاج إلى تثبيت `react-intlayer` أو استيراده مباشرة.
|
|
26
31
|
|
|
27
32
|
## التثبيت
|
|
28
33
|
|
|
@@ -32,16 +37,32 @@ npm install react-native-intlayer
|
|
|
32
37
|
|
|
33
38
|
## الصادرات
|
|
34
39
|
|
|
35
|
-
###
|
|
40
|
+
### الموفّر
|
|
41
|
+
|
|
42
|
+
| المكوّن | الوصف |
|
|
43
|
+
| ------------------ | --------------------------------------------------------------------------------- |
|
|
44
|
+
| `IntlayerProvider` | مكوّن Provider يلف تطبيقك ويوفر سياق Intlayer. يطبّق تلقائيًا polyfills المطلوبة. |
|
|
45
|
+
|
|
46
|
+
```tsx
|
|
47
|
+
import { IntlayerProvider } from "react-native-intlayer";
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
### الخطافات والأدوات
|
|
36
51
|
|
|
37
|
-
|
|
38
|
-
| ------------------ | ---------------------------------------------- |
|
|
39
|
-
| `IntlayerProvider` | مكوّن Provider يلف تطبيقك ويوفر سياق Intlayer. |
|
|
52
|
+
يتم إعادة تصدير هذه العناصر من `react-intlayer`، لذلك يمكنك استيرادها مباشرةً من `react-native-intlayer`:
|
|
40
53
|
|
|
41
|
-
|
|
54
|
+
| الصادر | الوصف |
|
|
55
|
+
| ----------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- |
|
|
56
|
+
| `useIntlayer` | الوصول إلى المحتوى المحلّي لمفتاح قاموس معيّن. |
|
|
57
|
+
| `useLocale` | قراءة اللغة الحالية وتغييرها. |
|
|
58
|
+
| `useDictionary`, `useDictionaryAsync`, `useDictionaryDynamic`, `useLoadDynamic` | تحميل محتوى القاموس بطرق مختلفة. |
|
|
59
|
+
| `useI18n` | خطاف متوافق مع i18next. |
|
|
60
|
+
| `t` | مساعد الترجمة المضمّن. |
|
|
61
|
+
| `getIntlayer`, `getDictionary` | أدوات استرجاع المحتوى الأمرية. |
|
|
62
|
+
| `localeCookie`, `localeInStorage`, `setLocaleCookie`, `setLocaleInStorage`, `useLocaleCookie`, `useLocaleStorage` | مساعدات استمرارية اللغة. |
|
|
42
63
|
|
|
43
64
|
```tsx
|
|
44
|
-
import "react-native-intlayer";
|
|
65
|
+
import { useIntlayer, useLocale, t } from "react-native-intlayer";
|
|
45
66
|
```
|
|
46
67
|
|
|
47
68
|
### ملحق التوافق (Polyfill)
|
|
@@ -50,10 +71,25 @@ import "react-native-intlayer";
|
|
|
50
71
|
| ------------------ | ------------------------------------------------------------ |
|
|
51
72
|
| `intlayerPolyfill` | دالة تطبّق polyfills الضرورية لـ React Native لدعم Intlayer. |
|
|
52
73
|
|
|
53
|
-
|
|
74
|
+
```tsx
|
|
75
|
+
import { intlayerPolyfill } from "react-native-intlayer";
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
> يتم تطبيق polyfill تلقائيًا عند استيراد `IntlayerProvider`. استدعِ `intlayerPolyfill` يدويًا فقط إذا كنت بحاجة إلى polyfills قبل تحميل الموفّر.
|
|
79
|
+
|
|
80
|
+
### المنسّقات
|
|
81
|
+
|
|
82
|
+
خطافات التنسيق المعتمدة على Intl للأرقام والتواريخ وغيرها متاحة من المسار الفرعي `/format`:
|
|
83
|
+
|
|
84
|
+
```tsx
|
|
85
|
+
import { useNumber, useDate } from "react-native-intlayer/format";
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
### عرض Markdown و HTML
|
|
54
89
|
|
|
55
90
|
```tsx
|
|
56
|
-
import "react-native-intlayer";
|
|
91
|
+
import { MarkdownProvider } from "react-native-intlayer/markdown";
|
|
92
|
+
import { HTMLProvider } from "react-native-intlayer/html";
|
|
57
93
|
```
|
|
58
94
|
|
|
59
95
|
### تكوين Metro
|
|
@@ -66,8 +102,6 @@ import "react-native-intlayer";
|
|
|
66
102
|
| `configMetroIntlayerSync` | دالة متزامنة تدمج تكوين Metro دون تحضير موارد Intlayer. |
|
|
67
103
|
| `exclusionList` | تنشئ نمط RegExp لقائمة الحظر (blockList) في Metro لاستبعاد ملفات المحتوى من الحزمة. |
|
|
68
104
|
|
|
69
|
-
الاستيراد:
|
|
70
|
-
|
|
71
105
|
```tsx
|
|
72
|
-
import "react-native-intlayer/metro";
|
|
106
|
+
import { configMetroIntlayer } from "react-native-intlayer/metro";
|
|
73
107
|
```
|