集成react-native-web后yarn test报错、Mac端Web无法运行求助

问题1：执行yarn run test报PNG语法错误 #

原因 #

Jest默认无法解析图片等静态资源文件，需要配置mock规则处理静态资源。

解决步骤 #

• 项目根目录新建__mocks__/fileMock.js，写入内容：

module.exports = 'test-file-stub';

• 修改Jest配置（可写在package.json的jest字段，或单独的jest.config.js文件中），添加如下配置：

{
  "moduleNameMapper": {
    "\\.(png|jpg|jpeg|gif|svg|woff|woff2)$": "<rootDir>/__mocks__/fileMock.js"
  }
}

配置完成后重新执行测试即可。

问题2：Mac端Web产物无法运行，Windows端正常 #

核心解决方案 #

1. 替换Web兼容的导航器
   你当前使用的createNativeStackNavigator来自@react-navigation/native-stack，该包仅适配iOS/Android原生平台，没有Web端兼容实现。Windows端Chrome能运行属于偶然兼容，Safari对非标准Web API的限制更严格因此报错。
   操作步骤：

• 安装Web兼容的导航包：yarn add @react-navigation/stack
• 修改src/App.js中的导航引入逻辑：

// 移除原有引入
// import { createNativeStackNavigator } from '@react-navigation/native-stack';
// 替换为全平台兼容的导航器
import { createStackNavigator } from '@react-navigation/stack';
const Stack = createStackNavigator();

其余导航配置无需修改，@react-navigation/stack是JS实现的全平台导航器，可同时适配Web、iOS、Android。

2. 修正Babel转译规则
   如果替换导航后仍有报错，是因为Safari对新JS语法支持落后于Chrome，需要将node_modules下的React Native相关包纳入转译范围：

• 确保babel.config.js包含如下配置：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: ['react-native-web'],
};

• Webpack配置中将node_modules/react-native-*、@react-navigation/*加入babel-loader的转译包含列表，避免未转译的ES6+语法在Safari中报错。

3. 检查别名配置
   确认Webpack配置中正确配置了react-native到react-native-web的别名：

resolve: {
  alias: {
    'react-native$': 'react-native-web',
  },
  extensions: ['.web.js', '.js', '.json', '.web.jsx', '.jsx'],
}

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