react-native-paper 中的自定义主题

Question

我在尝试理解 React Native Paper 样式时遇到了 React Native with Expo 的问题。

我创建了一个有问题的代码示例：https://gitlab.com/mszymczakowski/react-native-paper-theming-issue

当我从 App.tsx 文件中导出带有自定义主题的 const，然后导入并尝试在 HomeScreen.tsx 中使用它时，我收到了类型错误 undefined is not an object (evaluating '_App.customTheme.colors')。

将带有自定义主题的 const 移动到另一个 .ts 文件似乎可以解决问题 - 我可以在 App.tsx 和 HomeScreen.tsx 中使用它：https://gitlab.com/mszymczakowski/react-native-paper-theming-issue/-/tree/theme-fix

但正如我提到的，我想了解这里发生了什么，以及为什么一种方法会出错，而第二种方法不会出错。

提前致谢

Answer 1

这并不是严格意义上的 react-native 也不是 react-native-paper，而是 javascript (ES2015) 导入。

当模块A导入模块B，为了执行模块A，它首先执行'模块B'，否则执行模块A你会得到'未定义'的错误（对象等），因为它可能会尝试使用应该从模块 B 导出的内容。

在您的情况下，“App.tsx”中的模块导入“HomeScreen.tsx”中的模块，因此运行时尝试在 HomeScreen 和 App 之前执行，BUT 在 HomeScreen 中您从同一个导入了一些东西（customTheme）模块“App.tsx”，生成所谓的“需求循环”。
注意 实际上，如果我尝试运行您的示例项目，我会收到一个警告（在错误之前：未定义不是对象）：“需要循环：App.js -> src/screens/HomeScreen.js -> App.js”，然后是警告消息“允许需要循环，但可能导致未初始化的值。”我想你也收到了这个警告。
发生了什么？ 运行时首先执行 HomeScreen，当尝试访问 customTheme 属性（第 21 行）时，它会抛出“未定义不是对象”错误，因为在那一刻 App 模块尚未执行，然后 customTheme 尚未初始化。

第二种方法有什么不同？

1. App.tsx 导入 HomeScreen.tsx
   
2. HomeScreen.tsx 导入 Theme.tsx
   
3. App.tsx 导入 Theme.tsx
   

为了执行App.tsx，首先执行HomeScreen.tsx，为了执行HomeScreen.tsx，首先执行Theme.tsx，所以实际上“执行顺序”是：

Theme.tsx => HomeScreen.tsx => App.tsx