Связывание и использование локального модуля пользовательского интерфейса в React-Native

Отказ от ответственности; Я новичок в реагировании и реагировании. Я скачал модуль пользовательского интерфейса и пытаюсь использовать его в своем проекте. Вот как выглядит структура папок:

├── myProject
│   ├── README.md
│   └── src
│       └── client
│           └── {actual react-native project}
└── react-native-ui-module
    ├── node_modules
    ├── package-lock.json
    ├── package.json
    └── src

Я добавил react-native-ui-module к myProject/src/client/package.json вот так:

"react-native-ui-module": "file:../../../react-native-ui-module", 

Оттуда я выполнил следующую команду:

$ npm install
$ react-native link

Я вижу модуль в node_modules после вышеуказанных шагов.

Я ожидал, что затем буду использовать модуль следующим образом:

import { Button } from 'react-native-ui-module';

Однако я получаю сообщение об ошибке, в котором говорится, что Modulereact-native-ui-module` не существует на карте модуля Haste. Я попытался следовать предложению сообщения об ошибке, а именно:

Это может быть связано с https://github.com/facebook/react-native/issues/4968 Чтобы решить, попробуйте следующее:

  1. Четкие сторожевые часы: watchman watch-del-all.
  2. Удалите папку node_modules: rm -rf node_modules && npm install.
  3. Сбросить кэш Metro Bundler: rm -rf /tmp/metro-bundler-cache-* или npm start -- --reset-cache.
  4. Удалить ускоренный кеш: rm -rf /tmp/haste-map-react-native-packager-*.

Я также пытался использовать относительные и абсолютные пути в операторе импорта. Есть ли лучший способ импорта и установки модуля? И какие еще шаги по устранению неполадок я могу предпринять, чтобы действительно использовать модуль?

Кроме того, чтобы уточнить; это модуль, который я купил и загрузил вручную, поэтому он недоступен в npmjs.

Пробовали связать вручную?

Andrew 03.03.2019 19:37

Я рекомендую связать его вручную, следуя инструкциям модуля.

vitomadio 03.03.2019 19:54

Как связать вручную? Я наткнулся на эту статью: facebook.github.io/react-native/docs/linking-libraries-ios, но нет нативного кода, который нужно связать.

Donato Perconti 03.03.2019 21:56
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
3
109
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Короткая вещь, которую вы можете сделать, учитывая вашу текущую ситуацию, - это скопировать модуль пользовательского интерфейса в node_modules вашего {фактического реактивного проекта}, тогда модуль пользовательского интерфейса будет доступен для использования в импорте, таким образом вы даже не нужно добавлять модуль в ваш package.json, но этот способ предназначен только для проверки того, что может сделать модуль пользовательского интерфейса.

Правильный способ — найти этот модуль пользовательского интерфейса на сайте npm и использовать команду npm install --save [name-of-the-ui-module], после чего модуль пользовательского интерфейса будет доступен для использования в импорте.

(Обновлено с учетом комментариев ниже)

Чтобы избежать головной боли с npm, учитывая, что вашей библиотеки нет в репозитории npm, вы также можете включить эту библиотеку в папку lib в свой проект и использовать ее так же, как и любой другой компонент.

Итак, модуль действительно находится в node_modules после npm install && react-native link. Я также пытался использовать этот путь для его импорта, но все равно не повезло. Рассматриваемый модуль также является тем, который я купил и загрузил, поэтому он недоступен на npmjs. Я обновил свой вопрос, чтобы уточнить это.

Donato Perconti 03.03.2019 22:00

Что ж, это должно сработать, просто поместив проект в папку node_modules, а затем импортировав его вот так import { Button } from 'react-native-ui-module';. Таким образом, вам не нужно делать npm install, вам также не нужно делать react-native link, это попытается связать собственный код, что не в вашем случае. Одна вещь, которую вы можете сделать, это проверить, есть ли в этом модуле пользовательского интерфейса файл index.js, который экспортирует компоненты, которые вы ищете (кнопка, текст...).

Cleinilton Fernandes 03.03.2019 22:15

У него есть файл index.js, который экспортирует компоненты. Это меняет дело?

Donato Perconti 03.03.2019 22:22

Это ничего не меняет, это ожидаемо. Чтобы избежать головной боли с npm, учитывая, что вашей библиотеки нет в репозитории npm, вы также можете включить эту библиотеку в папку lib в свой проект и использовать ее так же, как вы использовали любой другой компонент.

Cleinilton Fernandes 03.03.2019 22:24

хорошо - я просто добавил это в исходный код. Если вы хотите обновить свой ответ, включив в него эту информацию, я буду рад отметить его как правильный.

Donato Perconti 07.03.2019 07:57

Я обновил свой ответ. Я рад, что вы смогли решить свою проблему.

Cleinilton Fernandes 08.03.2019 14:19

Другие вопросы по теме