React Native Web中*.web.js和*.native.js平台适配命名失效问题咨询

我明白这种明明路径正确却报文件找不到的挫败感，咱们一步步排查解决这个平台特定文件适配的问题：

1. 先确认打包工具的扩展名解析配置 #

React Native的平台文件识别完全依赖打包工具的配置支持，先检查你的配置文件：

针对Metro（React Native默认打包工具） #

在metro.config.js里确保已经把平台扩展名加入解析列表：

const { getDefaultConfig } = require('metro-config');

module.exports = (async () => {
  const { resolver: { sourceExts } } = await getDefaultConfig();
  return {
    resolver: {
      sourceExts: [...sourceExts, 'web.js', 'web.ts', 'web.tsx', 'native.js', 'native.ts', 'native.tsx'],
    },
  };
})();

针对Webpack（Web端打包） #

如果是用Webpack构建Web版本，需要在webpack.config.js的resolve.extensions里优先加入平台扩展名：

module.exports = {
  resolve: {
    extensions: ['.web.js', '.web.jsx', '.web.ts', '.web.tsx', '.js', '.jsx', '.ts', '.tsx'],
    // 注意：native后缀一般不需要在Webpack里配置，因为Web端不会用到
  },
};

2. 核对文件结构与命名 #

确保你的文件结构是严格对应的：

Foo/
  Foo.web.js   # Web端实现
  Foo.native.js # Native端实现

导入时不要加平台后缀，就用你现在的写法import { Foo } from './Foo/Foo';，打包工具会自动根据当前环境匹配对应的文件。

3. 排查通用文件的干扰 #

如果同一目录下存在不带平台后缀的Foo.js，打包工具会优先选择这个通用文件，跳过平台特定版本。如果你的需求是优先用平台适配文件，要么删除这个通用文件，要么调整配置里的扩展名顺序，把.web.js/.native.js放在普通扩展名前面。

4. 清除缓存+重启服务 #

缓存经常是配置不生效的元凶，试试这些操作：

• 清除Metro缓存：npx metro-cache clean
• 清除Webpack缓存：删除node_modules/.cache目录，或者重启服务时加上--no-cache参数
• 完全关闭打包服务后重新启动，确保新配置被加载

5. 检查版本兼容性 #

react-native-web和react-native的版本不匹配也可能导致这类问题，建议查看官方文档确认你使用的版本组合是否兼容。

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