在 React Native Web 中使用 StyleSheet.create() 时出现“WeakMap”错误

Question

我有一个 React Native + Expo 应用程序，在 iOS 和 Android 上运行良好。我现在尝试让它作为网络应用程序运行，但它立即失败并出现以下错误：

Uncaught TypeError: WeakMap key 1467 must be an object or an unregistered symbol

我已将错误追溯到我的

StyleSheet.create()

函数，其中

1467

是对象中第一个键/值对的值（在本例中为

windowWidth

）：

const styles = StyleSheet.create({
    windowWidth: windowWidth,
    windowHeight: windowHeight,
    lightContrastColor: lightContrastColor,
    darkContrastColor: darkContrastColor,
    ...
    })

如果我注释掉第一个键/值对，抛出的错误将包含下一个键/值对的值，依此类推。对于

windowWidth

和

windowHeight

，这些是整数，但对于

lightContrastColor

，这是一个字符串。

我完全不知道这里发生了什么，而且我也找不到任何人报告类似的错误。

Answer 1

您遇到的错误似乎与 React Native 的 StyleSheet.create() 函数处理对象键的方式有关。

要解决此问题，请使用唯一的对象键

import { View, Text, StyleSheet } from "react-native";
import React from "react";

let windowWidth="100%";
let windowHeight="100%";
let lightContrastColor="#FFF";
let darkContrastColor="#000";

const index = () => {
  return (
    <View
      style={[
        styles.windowWidthStyle,
        styles.windowHeightStyle,
        styles.lightContrastColorStyle,
        styles.darkContrastColorStyle,
      ]}
    >
      <Text>index</Text>
    </View>
  );
};

export default index;

const styles = StyleSheet.create({
  windowWidthStyle: {
    width: windowWidth,
  },
  windowHeightStyle: {
    height: windowHeight,
  },
  lightContrastColorStyle: {
    color: lightContrastColor,
  },
  darkContrastColorStyle: {
    color: darkContrastColor,
  },
});