React Native转Web时Uncaught TypeError错误的解决方法

我有一个运行正常的React Native应用，尝试转为React Native Web应用。启动Expo并选择web选项时，出现错误：Uncaught TypeError: Cannot read properties of undefined (reading '2')，错误指向account.styles.js第59行。

错误栈 #

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
}

解决方法 #

错误根源是AnimationWrapper组件中props.theme在Web环境下未被正确注入，导致读取space[2]时theme为undefined。可以通过以下步骤修复：

• 确保ThemeProvider覆盖Web环境：检查应用根组件，确认ThemeProvider（来自styled-components或react-native-paper）在Web环境下正常初始化，且正确传入包含space属性的theme对象。示例：

  import { ThemeProvider } from 'styled-components/native';
  import { space, lineHeights } from './path/to/spacing';
  
  const theme = {
    space,
    lineHeights,
    // 其他自定义theme属性
  };
  
  export default function App() {
    return (
      <ThemeProvider theme={theme}>
        {/* 应用核心内容 */}
      </ThemeProvider>
    );
  }
  

• 添加空值保护：直接在样式中加入可选链和默认值，避免theme未定义时抛出错误：
  修改AnimationWrapper的padding样式为：

  padding: ${(props) => props.theme?.space[2] || '8px'};
  

• 检查styled-components适配配置：确认babel-plugin-styled-components-react-native-web已在babel配置中启用，同时可以尝试更新styled-components到与React Native Web兼容的最新版本，确保跨环境样式解析正常。

内容的提问来源于stack exchange，提问作者mightycode Newton