Блог

Главная - Вопросы по программированию - Связывание и использование локального модуля пользовательского интерфейса в react-native

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

#reactjs #react-native

#reactjs #react-native

Вопрос:

Отказ от ответственности; Я новичок в react amp; 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';

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

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

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

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

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

Комментарии:

1. Вы пробовали связывать его вручную?

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

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

Ответ №1:

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

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

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

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

Комментарии:

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

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

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

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

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