React Native 未捕获的类型错误:无法读取未定义的属性(阅读“% 2”)

im9ewurl  于 2023-10-22  发布在  React
关注(0)|答案(1)|浏览(163)

我有一个react native app,它运行得很好。我试着把它转换成一个react native web app。但当我开始世博会,并选择为选项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
}

问:如何处理这个错误?

byqmnocz

byqmnocz1#

神圣的moly!!这是因为通过ThemeProvider我仍然有风格的组件。而不是:

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

相关问题