未捕获类型错误：无法读取未定义的属性（读取“2”）

Question

我有一个反应本机应用程序，它工作正常。我尝试将其转换为 React Native Web 应用程序。但是当我开始博览会并选择选项 w - 用于网络时。我收到此错误：

account.styles.js:59  Uncaught TypeError: Cannot read properties of undefined (reading '2')
    at account.styles.js:59:1
    at flatten (flatten.js:68:1)
    at flatten (flatten.js:46:1)
    at InlineStyle.generateStyleObject (InlineStyle.js:29:1)
    at StyledNativeComponent.generateAndInjectStyles (StyledNativeComponent.js:120:1)
    at StyledNativeComponent.js:46:1
    at updateContextConsumer (react-dom.development.js:21207:1)
    at beginWork (react-dom.development.js:21652:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)

这是文件 account.style.js:

import { Button, TextInput } from "react-native-paper";

import { Text } from "../../../components/typography/text.component";
import styled from "styled-components/native";

export const AccountBackground = styled.ImageBackground.attrs({
    source: require("../../../../assets/lizard.jpg"),
})`
    flex: 1;
    align-items: center;
    justify-content: center;
`;

export const AnimationWrapper = styled.View`
    width: 15%;
    height: 15%;
    position: absolute;
    top: 30px;
    padding: ${(props) => props.theme.space[2]};
`;

还有文件spacing.js：

export const lineHeights = {
    title: "28px",
    copy: "20px",
};

export const space = ["0px", "4px", "8px", "16px", "32px", "64px"];

这是我的 package.json 文件：

{
    "name": "dierenwelzijnapp",
    "version": "1.0.0",
    "main": "node_modules/expo/AppEntry.js",
    "scripts": {
        "start": "expo start",
        "android": "expo start --android",
        "ios": "expo start --ios",
        "web": "expo start --web",
        "eject": "expo eject",
        "lint": "eslint . --ext .js",
        "postinstall": "patch-package"
    },
    "dependencies": {
        "@ant-design/icons": "4.0.0",
        "@expo-google-fonts/lato": "^0.2.2",
        "@expo-google-fonts/oswald": "^0.2.2",
        "@expo/webpack-config": "^19.0.0",
        "@react-native-async-storage/async-storage": "1.18.2",
        "@react-navigation/bottom-tabs": "^6.5.4",
        "@react-navigation/native": "^6.1.3",
        "@react-navigation/stack": "^6.3.14",
        "babel-plugin-styled-components-react-native-web": "^0.2.2",
        "css-to-react-native": "^3.2.0",
        "expo": "~49.0.13",
        "expo-font": "~11.4.0",
        "expo-status-bar": "~1.6.0",
        "lottie-react-native": "5.1.6",
        "next-transpile-modules": "^10.0.1",
        "patch-package": "^8.0.0",
        "react": "18.2.0",
        "react-dom": "18.2.0",
        "react-native": "0.72.6",
        "react-native-gesture-handler": "~2.12.0",
        "react-native-paper": "^5.1.3",
        "react-native-safe-area-context": "4.6.3",
        "react-native-screens": "~3.22.0",
        "react-native-svg": "13.9.0",
        "react-native-web": "~0.19.6",
        "react-toast-notifier": "^1.0.3",
        "styled-components": "^5.3.6"
    },
    "devDependencies": {
        "@babel/core": "^7.19.3",
        "@react-native-community/eslint-config": "^3.2.0",
        "eslint": "^8.32.0",
        "prettier": "^2.8.3"
    },
    "private": true
}

问题：如何解决这个错误？

Answer 1

圣钼！！这是因为通过 ThemeProvider 我仍然有样式组件。而不是

import { ThemeProvider } from "styled-components/native";