react-native-paper 中的自定义主题
Custom theming in react-native-paper
我在尝试理解 React Native Paper 的样式时遇到了 React Native with Expo 的问题。
我创建了一个带有问题的代码示例：https://gitlab.com/mszymczakowski/react-native-paper-theming-issue
当我从 App.tsx 文件中导出带有自定义主题的常量，然后导入并尝试在 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
但是正如我提到的，我想了解这里发生了什么，以及为什么一种方法有错误而第二种方法没有。
提前致谢
这不是严格意义上的 react-native 也不是 react-native-paper，而是 javascript (ES2015) import (s).
当模块A导入模块B时，为了执行模块A，先执行'module B'，否则执行模块A可以得到'undefined'（对象等）的错误，因为它可能会尝试使用应该从模块 B.
导出的内容
在你的案例中，'App.tsx' 中的模块导入了 'HomeScreen.tsx' 中的模块，因此 运行time 尝试在 HomeScreen 之前执行，然后是 App，BUT 在 HomeScreen 你从同一模块 'App.tsx' 导入了一些东西 (customTheme)，生成了所谓的“需要循环”。
注意
实际上，如果我尝试 运行 你的示例项目，我会收到（在错误之前：undefined is not an object）警告：“需要周期：App.js -> src/screens/HomeScreen.js -> App.js”后跟警告消息“允许需要循环，但可能导致未初始化的值。”我想你也收到了这个警告。
发生了什么事？ 运行 时间首先执行 HomeScreen，当尝试访问自定义主题时 属性（第 21 行）它抛出 'undefined is not an object' 错误，因为在那一刻App 模块尚未执行，因此 customTheme 尚未初始化。
第二种方法有什么不同？
- App.tsx 进口 HomeScreen.tsx
- HomeScreen.tsx 进口 Theme.tsx
- App.tsx 进口 Theme.tsx
为了执行App.tsx，首先执行HomeScreen.tsx，为了执行HomeScreen.tsx，首先执行Theme.tsx，所以实际上“顺序执行”是：
Theme.tsx => HomeScreen.tsx => App.tsx
我在尝试理解 React Native Paper 的样式时遇到了 React Native with Expo 的问题。
我创建了一个带有问题的代码示例：https://gitlab.com/mszymczakowski/react-native-paper-theming-issue
当我从 App.tsx 文件中导出带有自定义主题的常量，然后导入并尝试在 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
但是正如我提到的，我想了解这里发生了什么，以及为什么一种方法有错误而第二种方法没有。
提前致谢
这不是严格意义上的 react-native 也不是 react-native-paper，而是 javascript (ES2015) import (s).
当模块A导入模块B时，为了执行模块A，先执行'module B'，否则执行模块A可以得到'undefined'（对象等）的错误，因为它可能会尝试使用应该从模块 B.
导出的内容
在你的案例中，'App.tsx' 中的模块导入了 'HomeScreen.tsx' 中的模块，因此 运行time 尝试在 HomeScreen 之前执行，然后是 App，BUT 在 HomeScreen 你从同一模块 'App.tsx' 导入了一些东西 (customTheme)，生成了所谓的“需要循环”。
注意
实际上，如果我尝试 运行 你的示例项目，我会收到（在错误之前：undefined is not an object）警告：“需要周期：App.js -> src/screens/HomeScreen.js -> App.js”后跟警告消息“允许需要循环，但可能导致未初始化的值。”我想你也收到了这个警告。
发生了什么事？ 运行 时间首先执行 HomeScreen，当尝试访问自定义主题时 属性（第 21 行）它抛出 'undefined is not an object' 错误，因为在那一刻App 模块尚未执行，因此 customTheme 尚未初始化。
第二种方法有什么不同？
- App.tsx 进口 HomeScreen.tsx
- HomeScreen.tsx 进口 Theme.tsx
- App.tsx 进口 Theme.tsx
为了执行App.tsx，首先执行HomeScreen.tsx，为了执行HomeScreen.tsx，首先执行Theme.tsx，所以实际上“顺序执行”是：
Theme.tsx => HomeScreen.tsx => App.tsx