Импорт модуля в приложении React Native

Question

Я новичок в модульной системе ES6, так что это может звучать глупо.

В приложении React Native Starter, которое использует NativeBase, кто-нибудь может объяснить, как native-starter-kit/js/components/home/index.js сможет сделать

import myTheme from '../../themes/base-theme`;

когда файл импортируется из, native-starter-kit/js/themes/base-theme.js не было никакого кода, который export default переменная myTheme?

Answer 1

Второй файл, на который вы ссылаетесь - это экспорт по умолчанию. В строке 5:

export default {

// Badge
badgeBg: '#ED1727',
badgeColor: '#fff',

...

}

Поэтому, когда они делают import myTheme from '../../themes/base-theme; myTheme это имя переменной, которое они выбрали для импортированного модуля. В этом случае транспортер будет искать default экспорт.

Если бы они сделали import { myTheme } from '../../themes/base-theme; тогда возникла бы проблема, поскольку она не указана явно при экспорте. Делать это не относится к default экспорт, а тот, который явно называется myTheme

Я не уверен, что имел смысл, вы можете прочитать https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/import

Answer 2

Экспорт без значения по умолчанию означает, что это именованный экспорт.

Вы можете иметь несколько именованных экспортов в одном файле.

Пример 1: export class Theme {}

Здесь вы должны импортировать этот экспорт, используя его точное имя.

Чтобы использовать этот компонент в другом файле, вы должны сделать это, import { Theme } from '../../themes/base-theme'

Пример 2:

Если вы экспортируете как экспорт по умолчанию, export default class Theme {}

Затем в другом файле вы импортируете экспорт по умолчанию без использования { }, например, import Theme from '../../themes/base-theme'

Для каждого файла может быть только один экспорт по умолчанию.

Хотя соглашение React об экспорте одного компонента из файла и об экспорте - это экспорт по умолчанию.

Вы можете переименовать экспорт по умолчанию при его импорте. import myTheme from '../../themes/base-theme'