如何在导入期间修复“ TypeError：未定义不是对象”

Question

我正在尝试在React Native中组织我的公用theme文件夹。但是在尝试默认将模块导出到其他文件中时发现了一个问题。基本上，尝试执行以下基本结构：

+-- components
+-- theme
|  +-- appStyles.js
|  +-- colors.js
|  +-- index.js

在theme/appStyles.js中将默认导出单个对象（与colors.js相同）：

export default {
  screen: {
    flex: 1,
  },
};

在theme/index.js中，它将默认导出一个对象，将其映射到主题文件夹中的文件：

import AppStyles from './appStyles';
import Colors from './colors';

export default {
  AppStyles,
  Colors,
};

当我尝试在另一个模块（即SomeComponent.js）中使用它时，它将只是未定义且将不可用：

import { AppStyles } from '../theme';

console.log(AppStyles); // would log 'undefined'

---

作为解决方案，我一直在做：

在theme/appStyles.js中：

export const AppStyles = {
  screen: {
    flex: 1,
  },
};

在theme/index.js中：

export * from './appStyles';

然后它将在SomeComponent.js中可用：

import { AppStyles } from '../theme';

console.log(AppStyles); // would log Object structure

---

曾经在ReactJS Web中使用此“模式”。只是想知道React Native如何处理这个模块分辨率。

Answer 1

无需用{}包裹默认导出

import AppStyles from './appStyles';

export default AppStyles;

比简单地导入任何您想要的名称

import  AppStyles  from '../theme';

console.log(AppStyles);

我要从索引中导出多个内容

import  AppStyles  from '../theme';
import  Color from '../color';
export{
  Appstyle as default,
  Color
}

比只是导入为

import  AppStyles, {Color}  from '../theme';

console.log(AppStyles);
console.log(Color);