如何修复Expo Web中React Native+NativeWind的styleq错误

我是应用开发新手，使用React Native、NativeWind、TypeScript和Expo开发应用，iOS和Android端运行正常，但Web端测试时样式完全失效，控制台充斥大量错误信息。

相关配置 #

webpack.config.js #

const createExpoWebpackConfigAsync = require('@expo/webpack-config');

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(
    {
      ...env,
      babel: {
        dangerouslyAddModulePathsToTranspile: ["nativewind"],
      },
    },
    argv
  );

  config.module.rules.push({
    test: /\.css$/i,
    use: ["postcss-loader"],
  });
  
  return config;
};

tailwind.config.js #

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        "./App.{js,jsx,ts,tsx}", 
        "./components/**/*.{js,jsx,ts,tsx}",
        "./Screens/**/*.{js,jsx,ts,tsx}",
        "./src/**/*.{html,js}"
    ],
    theme: {
        extend: {},
      },
      plugins: [],
}

package.json依赖 #

"dependencies": {
    "expo": "^48.0.6",
    "expo-modules": "^0.0.0",
    "expo-status-bar": "~1.4.4",
    "expo-updates": "^0.16.3",   
    "@react-navigation/native": "^6.1.4",
    "@react-navigation/native-stack": "^6.9.10",
    "@react-navigation/stack": "^6.3.13",
    "@reduxjs/toolkit": "^1.9.2",
    "nativewind": "^2.0.11",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-native": "0.71.3",
    "react-native-web": "~0.18.12",
    "react-native-webview": "11.26.0",
    "react-number-format": "^5.1.3",
    "react-redux": "^8.0.5",
    "typescript": "^4.9.4"
    ...
  },
  "devDependencies": {
    "@expo/webpack-config": "^18.0.1",
    "@babel/core": "^7.12.9",
    "@tsconfig/react-native": "^2.0.3",
    "@types/react": "^18.0.28",
    "@types/react-native": "~0.70.6",
    "autoprefixer": "^10.4.8",
    "postcss": "^8.4.16",
    "postcss-loader": "4.2.0",
    "tailwindcss": "^3.2.6",
    "ts-node": "^10.9.1",
    "tsconfig-paths": "^4.1.2"
  },

错误信息 #

Web端控制台重复抛出如下错误：

styleq.js:103 styleq: opacity typeof 1 is not "string" or "null".

问题根源与解决方法 #

已定位问题核心：在Animatable.Image组件中使用了NativeWind的classNames属性传递样式，而Web端下这类第三方动画组件无法正确解析classNames，必须通过style属性直接传入样式对象。

正确代码示例：

<Animatable.Image
    style={{
        width: height * 0.23,
        height: height * 0.23,
        borderRadius: height * 0.5,
        marginLeft: "auto",
        marginRight: "auto"
    }}
    source={require("../assets/image.png")}
    animation="fadeIn"
    iterationCount={1}
    delay={200}
/>

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