Expo React Native Web端NativeWind样式及图片失效问题求助

1. 修复Tailwind配置文件的路径错误 #

你的tailwind.config.js中components的路径存在语法错误：

// 错误路径（多了一个斜杠和点）
"./components/**/*/.{js,jsx,ts,tsx}",
// 修正为
"./components/**/*.{js,jsx,ts,tsx}",

该错误会导致Tailwind无法扫描到组件文件中的类名，Web端因此无法生成对应样式。

2. 配置Webpack以支持NativeWind #

默认Expo Webpack配置未集成NativeWind的样式处理逻辑，需修改webpack.config.js，添加PostCSS loader解析NativeWind生成的样式：

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

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);
  
  // 添加NativeWind的PostCSS处理规则
  config.module.rules.push({
    test: /\.(js|jsx|ts|tsx)$/,
    include: path.resolve(__dirname, '.'),
    use: [
      {
        loader: 'postcss-loader',
        options: {
          postcssOptions: {
            plugins: [require('nativewind/postcss')],
          },
        },
      },
    ],
  });

  return config;
};

同时确保安装了所需依赖：

npm install postcss-loader nativewind --save-dev

3. 解决Web端图片显示问题 #

• 规范图片导入方式：Web端不支持Native中的部分相对路径写法，建议使用ES模块导入或require：

  // 正确示例
  import logo from '../assets/logo.png';
  <Image source={logo} style={{ width: 100, height: 100 }} />
  

• 若自定义Webpack配置后图片仍无法显示，可添加图片处理规则：

  config.module.rules.push({
    test: /\.(png|jpe?g|gif|svg)$/i,
    use: [
      {
        loader: 'file-loader',
        options: {
          name: '[name].[ext]',
          outputPath: 'assets/',
        },
      },
    ],
  });
  

  安装对应依赖：

  npm install file-loader --save-dev
  

4. 处理Webpack废弃警告 #

该警告由webpack-dev-server与@expo/webpack-config版本不兼容导致，暂时不影响功能。若要消除，可尝试锁定webpack-dev-server到兼容版本（如^4.15.0），或等待Expo官方更新配置。

修改完成后重启Web开发服务器：

npx expo start --web

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