Локальные пути require() для React-Native

Я ищу удобный способ доступа к файлам в корне моего приложения, избегая строк require (), которые выглядят так:

require('../../../../myModule')

есть некоторые хорошие решения для Node (https://gist.github.com/branneman/8048520) но я не видел способа использовать глобальные переменные в React Native.

есть ли у кого-нибудь чистое решение этой проблемы?

9
javascript react-native reactjs

5 ответов

из ответа Марка шиллинга на https://github.com/facebook/react-native/issues/3099

вы можете использовать абсолютный путь для импорта / требуется:

import {ProximaNovaText} from 'MyApp/src/components'; require('MyApp/src/utils/moment-twitter');

где "MyApp" - это любое имя, которое вы зарегистрировали в своем индексе.усвн.файл JS

Примечание для кода VS: это работает, но будьте предупреждены, что вы можете потерять intellisense и cmd/ctrl + click. Спасибо Йохан за информацию о CS code

15

вы можете пометить каталог как пакет, добавив package.json в корневом каталоге, который вы хотите разрешить.

Эл.г:

- app
    - package.json     // ← Add this package.json file
    - config
    - components
    - ... (etc)

package.json должен выглядеть так:

{ "name": "app" }

перезагрузите упаковщик 

react-native start --reset-cache

теперь вы можете использовать следующее во всех файлах проекта:

import store from 'app/config/store';
import Button from 'app/components/Button';

вы можете использовать этот же метод в других каталогах вашего проекта, я не думаю, что это работает via require, хотя пути Изображения, казалось, работают.

как отмечено в комментариях, вы можете потерять автозаполнение в своем редакторе (VSCode).

для JetBrains IDE есть некоторые текущие билеты здесь:

это может помочь с JetBrains IDE в то же время.

// A slash may allow auto-complete to work in your IDE (but will fail to resolve)
import Button from '/app/components/Button'; // Cannot be resolved
8

ставим код ниже на ваш :

/**
 * @providesModule myModule
 */

затем вы можете использовать require('myModule') в любых других файлах.

6

Дополнение @Tiagojdferreira

вы можете использовать его решение с библиотекой babel-plugin-module-resolver.

установить с:

npm install --save-dev babel-plugin-module-resolver

настроить .babelrc добавление плагинов свойство, как это:

{
  "presets": ["react-native"],
  "plugins": [
    ["module-resolver", {
      "alias": {
        "@src": "MyApp/src",
        "@otherAlias": "MyApp/src/other/path",
      }
    }]
  ]
}

использование:

require('@src/utils/moment-twitter');

надеюсь, что это помогает!

2

вы можете использовать глобальные переменные в react native, такие же, как node, свойства, определенные на global, доступны глобально.

например

global.foo = "blah";
console.log(foo); //logs "blah"

большинство решений узлов в приведенном выше gist должны работать правильно.

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

global.rootRequire = function(path) { return require(path); }

который просто позволяет глубоко вложенным требует быть от корня и избегает всех ../../ бизнес.

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

0