الفرق بين المراجعتين لصفحة: «ReactNative/libraries»
لا ملخص تعديل |
جميل-بيلوني (نقاش | مساهمات) ط مراجعة |
||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:استخدام المكتبات وتثبيتها من مجتمع React Native}}</noinclude> | |||
يوفّر إطار عمل [[ReactNative|React Native]] مجموعة من المكونات الأساسية وواجهات برمجة التطبيقات المضمَّنة والجاهزة للاستخدام في تطبيقك. لست مقيدًا بالمكونات وواجهات برمجة التطبيقات المجمَّعة مع إطار عمل React Native، إذ يمتلك React Native مجتمعًا من آلاف المطورين. إن لم تجد ما تبحث عنه في المكونات الأساسية وواجهات برمجة التطبيقات، فقد تتمكن من العثور على مكتبة وتثبيتها من مجتمع React Native لإضافتها إلى تطبيقك. | يوفّر إطار عمل [[ReactNative|React Native]] مجموعة من المكونات الأساسية وواجهات برمجة التطبيقات المضمَّنة والجاهزة للاستخدام في تطبيقك. لست مقيدًا بالمكونات وواجهات برمجة التطبيقات المجمَّعة مع إطار عمل React Native، إذ يمتلك React Native مجتمعًا من آلاف المطورين. إن لم تجد ما تبحث عنه في المكونات الأساسية وواجهات برمجة التطبيقات، فقد تتمكن من العثور على مكتبة وتثبيتها من مجتمع React Native لإضافتها إلى تطبيقك. | ||
== اختيار مدير الحزم Package Manager == | |||
تُثبَّت مكتبات React Native من [https://www.npmjs.com/ سجل npm] باستخدام مدير حزم Node.js مثل الأداتين [https://docs.npmjs.com/cli/v7/commands/npm/ npm CLI] أو [https://classic.yarnpkg.com/en/ Yarn Classic]. | تُثبَّت مكتبات React Native من [https://www.npmjs.com/ سجل npm] باستخدام مدير حزم Node.js مثل الأداتين [https://docs.npmjs.com/cli/v7/commands/npm/ npm CLI] أو [https://classic.yarnpkg.com/en/ Yarn Classic]. | ||
إذا ثبّتَ Node.js على حاسوبك، فهذا يعني أنك ثبّتَ الأداة npm CLI بالفعل. يفضّل بعض المطورين استخدام الأداة Yarn Classic لأنها ذات وقت تثبيت أسرع قليلًا مع وجود ميزات متقدمة إضافية مثل مساحات العمل Workspaces. تعمل كلتا الأداتين بصورة رائعة مع إطار العمل React Native.<blockquote>يُستخدَم المصطلحان "مكتبة library" و "حزمة package" بالتبادل في مجتمع JavaScript.</blockquote> | إذا ثبّتَ Node.js على حاسوبك، فهذا يعني أنك ثبّتَ الأداة npm CLI بالفعل. يفضّل بعض المطورين استخدام الأداة Yarn Classic لأنها ذات وقت تثبيت أسرع قليلًا مع وجود ميزات متقدمة إضافية مثل مساحات العمل Workspaces. تعمل كلتا الأداتين بصورة رائعة مع إطار العمل React Native.<blockquote>يُستخدَم المصطلحان "مكتبة library" و "حزمة package" بالتبادل في مجتمع JavaScript.</blockquote> | ||
== تثبيت مكتبة == | |||
يمكنك تثبيت مكتبة في مشروعك من خلال الذهاب إلى مجلد المشروع في الطرفية terminal وتشغيل أمر التثبيت. لنجرب الأمر مع <code>react-native-webview</code>: | يمكنك تثبيت مكتبة في مشروعك من خلال الذهاب إلى مجلد المشروع في الطرفية terminal وتشغيل أمر التثبيت. لنجرب الأمر مع <code>react-native-webview</code>: | ||
| سطر 20: | سطر 20: | ||
</syntaxhighlight>تتضمن المكتبة التي ثبّتناها شيفرة أصيلة، ونحتاج إلى ربطها بتطبيقنا قبل استخدامها. | </syntaxhighlight>تتضمن المكتبة التي ثبّتناها شيفرة أصيلة، ونحتاج إلى ربطها بتطبيقنا قبل استخدامها. | ||
== ربط الشيفرة الأصيلة على نظام iOS == | |||
يستخدم React Native مدير الاعتماديات CocoaPods لإدارة اعتماديات مشروع iOS وتتبع معظم مكتبات React Native نفس الآلية. إن لم تعمل المكتبة التي تستخدمها، فيجب الرجوع إلى ملف README للحصول على تعليمات إضافية. ستُطبَّق الإرشادات التالية في معظم الحالات: | يستخدم React Native مدير الاعتماديات CocoaPods لإدارة اعتماديات مشروع iOS وتتبع معظم مكتبات React Native نفس الآلية. إن لم تعمل المكتبة التي تستخدمها، فيجب الرجوع إلى ملف README للحصول على تعليمات إضافية. ستُطبَّق الإرشادات التالية في معظم الحالات: | ||
| سطر 29: | سطر 29: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== ربط الشيفرة الأصيلة على نظام Android == | |||
يستخدم إطار العمل React Native أداة Gradle لإدارة اعتماديات مشروع Android. يجب إعادة إنشاء التطبيق الثنائي لاستخدام مكتبتك الجديدة بعد تثبيتها مع الاعتماديات الأصيلة:<syntaxhighlight lang="bash"> | يستخدم إطار العمل React Native أداة Gradle لإدارة اعتماديات مشروع Android. يجب إعادة إنشاء التطبيق الثنائي لاستخدام مكتبتك الجديدة بعد تثبيتها مع الاعتماديات الأصيلة:<syntaxhighlight lang="bash"> | ||
npx react-native run-android | npx react-native run-android | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== البحث عن مكتبات == | |||
[https://reactnative.directory/ React Native Directory] | سجل [https://reactnative.directory/ React Native Directory] هو قاعدة بيانات قابلة للبحث عن مكتبات مصمَّمة خصيصًا لإطار عمل React Native، وهو المكان الأول الذي تبحث فيه عن مكتبة لتطبيق React Native الخاص بك. العديد من المكتبات التي ستجدها في دليل React Native هي من مجتمع [https://github.com/react-native-community/ React Native Community] أو [https://docs.expo.io/versions/latest/ Expo]. | ||
يقود المكتبات التي أنشأها مجتمع React Native متطوعون وأفراد من الشركات التي تعتمد على React Native. تدعم هذه المكتبات أنظمة iOS و tvOS و Android و Windows، لكن يختلف ذلك باختلاف المشاريع. كانت العديد من هذه المكتبات سابقًا مكونات React Native أساسية وواجهات برمجة تطبيقات. | يقود المكتبات التي أنشأها مجتمع React Native متطوعون وأفراد من الشركات التي تعتمد على React Native. تدعم هذه المكتبات أنظمة iOS و tvOS و Android و Windows، لكن يختلف ذلك باختلاف المشاريع. كانت العديد من هذه المكتبات سابقًا مكونات React Native أساسية وواجهات برمجة تطبيقات. | ||
| سطر 43: | سطر 44: | ||
يُعَد سجل npm ثاني أفضل مكان -بعد React Native Directory- إن لم تتمكن من العثور على مكتبة React Native في الدليل، فهو المصدر النهائي لمكتبات JavaScript ، لكن المكتبات التي يحتويها قد لا تكون جميعها متوافقة مع React Native. إطار عمل React Native هو بيئة من بين بيئات برمجة JavaScript المتعددة، بما في ذلك Node.js ومتصفحات الويب و Electron وغيرها الكثير، وتتضمن npm مكتبات تعمل في جميع هذه البيئات. | يُعَد سجل npm ثاني أفضل مكان -بعد React Native Directory- إن لم تتمكن من العثور على مكتبة React Native في الدليل، فهو المصدر النهائي لمكتبات JavaScript ، لكن المكتبات التي يحتويها قد لا تكون جميعها متوافقة مع React Native. إطار عمل React Native هو بيئة من بين بيئات برمجة JavaScript المتعددة، بما في ذلك Node.js ومتصفحات الويب و Electron وغيرها الكثير، وتتضمن npm مكتبات تعمل في جميع هذه البيئات. | ||
== تحديد توافق المكتبة == | |||
=== هل تعمل هذه المكتبة مع React Native؟ === | |||
لا تعمل عادةً المكتبات المصمَّمة خصيصًا للمنصات الأخرى مع إطار عمل React Native، مثل مكتبة <code>react-select</code> التي صُمِّمت للويب ويستهدف على وجه التحديد <code>react-dom</code>، و <code>rimraf</code> المصمَّمة لبيئة Node.js وتتفاعل مع نظام ملفات حاسوبك. تستخدم مكتبات أخرى مثل <code>lodash</code> ميزات لغة جافا سكريبت فقط وتعمل في أي بيئة. ستكتسب فكرة عن هذه المكتبات بمرور الوقت، ولكن أسهل طريقة لمعرفة ذلك هي تجربتها بنفسك. يمكنك إزالة الحزم باستخدام الأمر <code>npm uninstall</code> إذا اتضح أنها لا تعمل في إطار عمل React Native. | لا تعمل عادةً المكتبات المصمَّمة خصيصًا للمنصات الأخرى مع إطار عمل React Native، مثل مكتبة <code>react-select</code> التي صُمِّمت للويب ويستهدف على وجه التحديد <code>react-dom</code>، و <code>rimraf</code> المصمَّمة لبيئة Node.js وتتفاعل مع نظام ملفات حاسوبك. تستخدم مكتبات أخرى مثل <code>lodash</code> ميزات لغة جافا سكريبت فقط وتعمل في أي بيئة. ستكتسب فكرة عن هذه المكتبات بمرور الوقت، ولكن أسهل طريقة لمعرفة ذلك هي تجربتها بنفسك. يمكنك إزالة الحزم باستخدام الأمر <code>npm uninstall</code> إذا اتضح أنها لا تعمل في إطار عمل React Native. | ||
=== هل تعمل هذه المكتبة مع المنصات التي يدعمها تطبيقك؟ === | |||
يتيح لك React Native Directory ترشيح المكتبات حسب توافق المنصة مثل iOS و Android و Web و Windows. إذا كانت المكتبة التي ترغب في استخدامها غير مدرجة حاليًا هناك، فارجع إلى ملف README الخاص بالمكتبة لمعرفة المزيد. | يتيح لك React Native Directory ترشيح المكتبات حسب توافق المنصة مثل iOS و Android و Web و Windows. إذا كانت المكتبة التي ترغب في استخدامها غير مدرجة حاليًا هناك، فارجع إلى ملف README الخاص بالمكتبة لمعرفة المزيد. | ||
=== هل تعمل هذه المكتبة مع إصدار تطبيقك من إطار عمل React Native؟ === | |||
يتوافق أحدث إصدار من المكتبة مع أحدث إصدار من React Native. إن استخدمتَ إصدارًا أقدم، فيجب عليك الرجوع إلى ملف README لمعرفة إصدار المكتبة الذي يجب تثبيته. يمكنك تثبيت إصدار معين من المكتبة عن طريق تشغيل الأمر <code>npm install <library-name>@<version-number></code>، مثل:<syntaxhighlight lang="bash"> | يتوافق أحدث إصدار من المكتبة مع أحدث إصدار من React Native. إن استخدمتَ إصدارًا أقدم، فيجب عليك الرجوع إلى ملف README لمعرفة إصدار المكتبة الذي يجب تثبيته. يمكنك تثبيت إصدار معين من المكتبة عن طريق تشغيل الأمر <code>npm install <library-name>@<version-number></code>، مثل:<syntaxhighlight lang="bash"> | ||
npm install @react-native-community/netinfo@^2.0.0 | npm install @react-native-community/netinfo@^2.0.0 | ||
| سطر 59: | سطر 61: | ||
* [https://reactnative.dev/docs/libraries صفحة Using Libraries في توثيق React Native الرسمي.] | * [https://reactnative.dev/docs/libraries صفحة Using Libraries في توثيق React Native الرسمي.] | ||
[[تصنيف:ReactNative]] | |||
مراجعة 10:15، 6 أكتوبر 2021
يوفّر إطار عمل React Native مجموعة من المكونات الأساسية وواجهات برمجة التطبيقات المضمَّنة والجاهزة للاستخدام في تطبيقك. لست مقيدًا بالمكونات وواجهات برمجة التطبيقات المجمَّعة مع إطار عمل React Native، إذ يمتلك React Native مجتمعًا من آلاف المطورين. إن لم تجد ما تبحث عنه في المكونات الأساسية وواجهات برمجة التطبيقات، فقد تتمكن من العثور على مكتبة وتثبيتها من مجتمع React Native لإضافتها إلى تطبيقك.
اختيار مدير الحزم Package Manager
تُثبَّت مكتبات React Native من سجل npm باستخدام مدير حزم Node.js مثل الأداتين npm CLI أو Yarn Classic.
إذا ثبّتَ Node.js على حاسوبك، فهذا يعني أنك ثبّتَ الأداة npm CLI بالفعل. يفضّل بعض المطورين استخدام الأداة Yarn Classic لأنها ذات وقت تثبيت أسرع قليلًا مع وجود ميزات متقدمة إضافية مثل مساحات العمل Workspaces. تعمل كلتا الأداتين بصورة رائعة مع إطار العمل React Native.
يُستخدَم المصطلحان "مكتبة library" و "حزمة package" بالتبادل في مجتمع JavaScript.
تثبيت مكتبة
يمكنك تثبيت مكتبة في مشروعك من خلال الذهاب إلى مجلد المشروع في الطرفية terminal وتشغيل أمر التثبيت. لنجرب الأمر مع react-native-webview:
- في npm:
npm install react-native-webview
- في Yarn:
yarn add react-native-webview
تتضمن المكتبة التي ثبّتناها شيفرة أصيلة، ونحتاج إلى ربطها بتطبيقنا قبل استخدامها.
ربط الشيفرة الأصيلة على نظام iOS
يستخدم React Native مدير الاعتماديات CocoaPods لإدارة اعتماديات مشروع iOS وتتبع معظم مكتبات React Native نفس الآلية. إن لم تعمل المكتبة التي تستخدمها، فيجب الرجوع إلى ملف README للحصول على تعليمات إضافية. ستُطبَّق الإرشادات التالية في معظم الحالات:
شغّل الأمر pod install في مجلد ios الخاص بك لربطه بمشروع iOS الأصيل. يوجد اختصار لتنفيذ ذلك دون التبديل إلى مجلد ios وهو تشغيل الأمر npx pod-install.
npx pod-install
ثم أعِد إنشاء التطبيق الثنائي لبدء استخدام مكتبتك الجديدة:
npx react-native run-ios
ربط الشيفرة الأصيلة على نظام Android
يستخدم إطار العمل React Native أداة Gradle لإدارة اعتماديات مشروع Android. يجب إعادة إنشاء التطبيق الثنائي لاستخدام مكتبتك الجديدة بعد تثبيتها مع الاعتماديات الأصيلة:
npx react-native run-android
البحث عن مكتبات
سجل React Native Directory هو قاعدة بيانات قابلة للبحث عن مكتبات مصمَّمة خصيصًا لإطار عمل React Native، وهو المكان الأول الذي تبحث فيه عن مكتبة لتطبيق React Native الخاص بك. العديد من المكتبات التي ستجدها في دليل React Native هي من مجتمع React Native Community أو Expo.
يقود المكتبات التي أنشأها مجتمع React Native متطوعون وأفراد من الشركات التي تعتمد على React Native. تدعم هذه المكتبات أنظمة iOS و tvOS و Android و Windows، لكن يختلف ذلك باختلاف المشاريع. كانت العديد من هذه المكتبات سابقًا مكونات React Native أساسية وواجهات برمجة تطبيقات.
جميع المكتبات التي أنشأها Expo مكتوبة بلغة TypeScript وتدعم نظام iOS و Android و react-native-web، وتتطلب تثبيت react-native-unimodules أولًا لاستخدامها في تطبيق React Native الخاص بك.
يُعَد سجل npm ثاني أفضل مكان -بعد React Native Directory- إن لم تتمكن من العثور على مكتبة React Native في الدليل، فهو المصدر النهائي لمكتبات JavaScript ، لكن المكتبات التي يحتويها قد لا تكون جميعها متوافقة مع React Native. إطار عمل React Native هو بيئة من بين بيئات برمجة JavaScript المتعددة، بما في ذلك Node.js ومتصفحات الويب و Electron وغيرها الكثير، وتتضمن npm مكتبات تعمل في جميع هذه البيئات.
تحديد توافق المكتبة
هل تعمل هذه المكتبة مع React Native؟
لا تعمل عادةً المكتبات المصمَّمة خصيصًا للمنصات الأخرى مع إطار عمل React Native، مثل مكتبة react-select التي صُمِّمت للويب ويستهدف على وجه التحديد react-dom، و rimraf المصمَّمة لبيئة Node.js وتتفاعل مع نظام ملفات حاسوبك. تستخدم مكتبات أخرى مثل lodash ميزات لغة جافا سكريبت فقط وتعمل في أي بيئة. ستكتسب فكرة عن هذه المكتبات بمرور الوقت، ولكن أسهل طريقة لمعرفة ذلك هي تجربتها بنفسك. يمكنك إزالة الحزم باستخدام الأمر npm uninstall إذا اتضح أنها لا تعمل في إطار عمل React Native.
هل تعمل هذه المكتبة مع المنصات التي يدعمها تطبيقك؟
يتيح لك React Native Directory ترشيح المكتبات حسب توافق المنصة مثل iOS و Android و Web و Windows. إذا كانت المكتبة التي ترغب في استخدامها غير مدرجة حاليًا هناك، فارجع إلى ملف README الخاص بالمكتبة لمعرفة المزيد.
هل تعمل هذه المكتبة مع إصدار تطبيقك من إطار عمل React Native؟
يتوافق أحدث إصدار من المكتبة مع أحدث إصدار من React Native. إن استخدمتَ إصدارًا أقدم، فيجب عليك الرجوع إلى ملف README لمعرفة إصدار المكتبة الذي يجب تثبيته. يمكنك تثبيت إصدار معين من المكتبة عن طريق تشغيل الأمر npm install <library-name>@<version-number>، مثل:
npm install @react-native-community/netinfo@^2.0.0