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

Question

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

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

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

这是我得到的错误： TypeError: 无法读取属性未定义的“主要”

我怀疑这可能与 expo 的打包器和缺少加载器有关？我不知道。据我所知，我按照文档中的说明进行了所有操作，并怀疑这是 Expo Web 和 ThemeProvider 的问题。

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

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

我被这个阻止了，因为我需要决定是否继续使用带样式的组件。

Answer 1

事实证明，当您从“styled-components”导入 ThemeProvider 然后使用“styled-components/native”时，iOS 和 Android 构建仍然有效，但 Web 中断。 ..

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

Answer 2

哈哈……一样。我建议的一件事是为想要避免重复此问题的任何人创建正确导入的 lint 规则

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

styled-components ThemeProvider breaks in React Native => Expo Web build

styled-components

react-native-web

expo