عرض مصدر ReactNative/libraries

<noinclude>{{DISPLAYTITLE:استخدام المكتبات وتثبيتها من مجتمع React Native}}</noinclude>
يوفّر إطار عمل [[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].

إذا ثبّتَ Node.js على حاسوبك، فهذا يعني أنك ثبّتَ الأداة npm CLI بالفعل. يفضّل بعض المطورين استخدام الأداة Yarn Classic لأنها ذات وقت تثبيت أسرع قليلًا مع وجود ميزات متقدمة إضافية مثل مساحات العمل Workspaces. تعمل كلتا الأداتين بصورة رائعة مع إطار العمل React Native.<blockquote>يُستخدَم المصطلحان "مكتبة library" و "حزمة package" بالتبادل في مجتمع JavaScript.</blockquote>

== تثبيت مكتبة ==
يمكنك تثبيت مكتبة في مشروعك من خلال الذهاب إلى مجلد المشروع في الطرفية terminal وتشغيل أمر التثبيت. لنجرب الأمر مع <code>react-native-webview</code>:

* '''في npm''':
<syntaxhighlight lang="bash">
npm install react-native-webview
</syntaxhighlight>

* '''في Yarn''':
<syntaxhighlight lang="bash">
yarn add react-native-webview
</syntaxhighlight>تتضمن المكتبة التي ثبّتناها شيفرة أصيلة، ونحتاج إلى ربطها بتطبيقنا قبل استخدامها.

== ربط الشيفرة الأصيلة على نظام iOS ==
يستخدم React Native مدير الاعتماديات CocoaPods لإدارة اعتماديات مشروع iOS وتتبع معظم مكتبات React Native نفس الآلية. إن لم تعمل المكتبة التي تستخدمها، فيجب الرجوع إلى ملف README للحصول على تعليمات إضافية. ستُطبَّق الإرشادات التالية في معظم الحالات:

شغّل الأمر <code>pod install</code> في مجلد <code>ios</code> الخاص بك لربطه بمشروع iOS الأصيل. يوجد اختصار لتنفيذ ذلك دون التبديل إلى مجلد <code>ios</code> وهو تشغيل الأمر <code>npx pod-install</code>.<syntaxhighlight lang="bash">
npx pod-install
</syntaxhighlight>ثم أعِد إنشاء التطبيق الثنائي لبدء استخدام مكتبتك الجديدة:<syntaxhighlight lang="bash">
npx react-native run-ios
</syntaxhighlight>

== ربط الشيفرة الأصيلة على نظام Android ==

يستخدم إطار العمل React Native أداة Gradle لإدارة اعتماديات مشروع Android. يجب إعادة إنشاء التطبيق الثنائي لاستخدام مكتبتك الجديدة بعد تثبيتها مع الاعتماديات الأصيلة:<syntaxhighlight lang="bash">
npx react-native run-android
</syntaxhighlight>

== البحث عن مكتبات ==
سجل [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 أساسية وواجهات برمجة تطبيقات.

جميع المكتبات التي أنشأها Expo مكتوبة بلغة [[TypeScript]] وتدعم نظام iOS و Android و react-native-web، وتتطلب تثبيت [https://github.com/expo/expo/tree/master/packages/react-native-unimodules 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، مثل مكتبة <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؟ ===

يتوافق أحدث إصدار من المكتبة مع أحدث إصدار من React Native. إن استخدمتَ إصدارًا أقدم، فيجب عليك الرجوع إلى ملف README لمعرفة إصدار المكتبة الذي يجب تثبيته. يمكنك تثبيت إصدار معين من المكتبة عن طريق تشغيل الأمر <code>npm install <library-name>@<version-number>‎</code>، مثل:<syntaxhighlight lang="bash">
npm install @react-native-community/netinfo@^2.0.0
</syntaxhighlight>

== مصادر ==

* [https://reactnative.dev/docs/libraries صفحة Using Libraries في توثيق React Native الرسمي.]
[[تصنيف:ReactNative]]
[[تصنيف:React Native Docs]]