styled-components ThemeProvider 在 React Native => Expo Web 构建中中断答案

【问题标题】：styled-components ThemeProvider breaks in React Native => Expo Web buildstyled-components ThemeProvider 在 React Native => Expo Web 构建中中断
【发布时间】：2021-03-15 08:30:07
【问题描述】：

我正在处理一个小型展览项目设置，我在其中为 iOS/Android 和 Web 进行开发。我最近想在项目中添加样式组件，并为 Web 和移动设备启动并运行所有内容，直到我开始使用主题提供程序和主题道具。我 99% 确信我应该正确完成所有操作，因为它适用于移动设备，但我在网络版本中遇到 JS 异常。

我为主题创建了一个类型，我知道它可以工作，因为当我尝试向主题添加错误内容时，我的 IDE 会告诉我。
我创建了一个 theme.ts 并将其导入到我实现 ThemeProvider 的组件中。我知道这很有效，因为在访问 prop.theme 时，我会自动完成，正如我所说，它可以在移动设备上运行。

const Container = styled.View`
    background-color: ${props => props.theme.color.primary};
`

这是我得到的错误： TypeError: Cannot read property ‘primary’ of undefined

我怀疑这可能与 expo 的捆绑器和缺少加载器或其他什么有关？我不知道。据我所知，我按照文档中的方式进行了所有操作，并怀疑这是 Expo Web 和 ThemeProvider 的问题。

这些是我正在使用的相关包：

"expo": "~39.0.2"
"styled-components": "^5.2.1"
"@babel/core": "~7.9.0"

我被这个阻止了，因为我需要决定是继续使用样式化组件还是不使用它们。

【问题讨论】：

标签： expo styled-components react-native-web

【解决方案1】：

事实证明，当您从“styled-components”导入 ThemeProvider，然后使用 iOS 和 Android 构建的“styled-components/native”时仍然可以工作，但网络中断...

这是我的错误。到处使用“styled-components/native”！傻逼

【讨论】：

【解决方案2】：

大声笑...一样。我建议的一件事是为希望避免重复此问题的任何人创建正确导入的 lint 规则

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。