Использование библиотек

React Native предоставляет набор встроенных основных компонентов и API, готовых к использованию в вашем приложении. Вы не ограничены компонентами и API, поставляемыми с React Native. React Native имеет сообщество из тысяч разработчиков. Если основные компоненты и API не содержат того, что вам нужно, вы можете найти и установить библиотеку из сообщества, чтобы добавить функциональность в ваше приложение.

Выбор менеджера пакетов

Библиотеки React Native обычно устанавливаются с реестра npm с помощью менеджера пакетов Node.js, такого как npm CLI или Yarn Classic.

Если у вас установлен Node.js на вашем компьютере, то у вас уже установлен npm CLI. Некоторые разработчики предпочитают использовать Yarn Classic для немного более быстрой установки и дополнительных расширенных функций, таких как пространства имен. Оба инструмента отлично работают с React Native. Для простоты объяснения в этой инструкции мы будем использовать npm.

💡 В сообществе JavaScript термины «библиотека» и «пакет» используются взаимозаменяемо.

Установка библиотеки

Чтобы установить библиотеку в свой проект, перейдите в каталог проекта в терминале и выполните команду установки. Попробуем это с react-native-webview:

• npm
• Yarn

npm install react-native-webview

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 или Expo.

Библиотеки, созданные сообществом React Native, поддерживаются добровольцами и компаниями, которые полагаются на React Native. Они часто поддерживают iOS, tvOS, Android, Windows, но это варьируется в зависимости от проекта. Многие из библиотек в этой организации ранее были основными компонентами и API React Native.

Все библиотеки, созданные Expo, написаны на TypeScript и поддерживают iOS, Android и react-native-web там, где это возможно.

После React Native Directory, реестр npm является следующим лучшим местом, если вы не можете найти библиотеку, специально предназначенную для React Native, в каталоге. Реестр npm — это основной источник библиотек JavaScript, но все перечисленные библиотеки могут быть не совместимы с React Native. React Native — это одна из многих сред программирования JavaScript, включая Node.js, веб-браузеры, Electron и другие, а npm содержит библиотеки, работающие во всех этих средах.

Определение совместимости библиотек

Работает ли это с React Native?

Обычно библиотеки, созданные специально для других платформ, не будут работать с React Native. Примеры включают react-select, созданную для веб-страниц и нацеленную на react-dom, и rimraf, созданную для Node.js и взаимодействующую с вашей файловой системой компьютера. Другие библиотеки, например lodash, используют только возможности языка JavaScript и работают в любой среде. Со временем вы поймете это, но пока самый простой способ узнать — попробовать самим. Вы можете удалить пакеты, используя 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.