能否使用同一代码库构建React Native macOS与Windows应用

可以实现同一代码库同时适配iOS、Android、macOS、Windows四个平台，你遇到的报错核心是版本不匹配与metro配置冲突导致的。

报错原因 #

• 你查阅的macOS搭建指南为0.63版本的旧文档，当前react-native-macos已经支持0.66及更高版本，无需强制使用0.63版本
• 先创建低版本macOS项目再强行适配高版本Windows的操作，导致项目内依赖版本冲突，metro配置的API不兼容：0.63版本metro使用blacklistRE配置排除规则，0.66版本已经改为exclusionList，配置不匹配就会抛出找不到模块的错误，后续的no bundle URL报错是因为metro打包失败，本地打包服务未正常启动导致的。

具体操作步骤 #

1. 初始化基础React Native项目
   选择你要统一使用的RN版本（推荐0.66.5及以上稳定版），执行命令：
   npx react-native init MultiPlatformApp --version 0.66.5
   初始化完成后先验证iOS、Android两端可以正常启动。

2. 适配macOS平台
   在项目根目录执行命令添加macOS支持：
   npx react-native-macos-init
   执行完成后运行npx react-native run-macos验证macOS端可以正常启动。

3. 适配Windows平台
   在项目根目录执行命令添加Windows支持：
   npx react-native-windows-init --overwrite

4. 统一配置metro规则
   修改项目根目录的metro.config.js文件，将macOS、Windows相关目录都加入排除规则，避免打包冲突：

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
const exclusionList = require('metro-config/src/defaults/exclusionList');

const config = {
  resolver: {
    blacklistRE: exclusionList([
      /windows\/.*/,
      /macos\/.*/,
      /node_modules\/react-native-macos\/.*/,
      /node_modules\/react-native-windows\/.*/
    ])
  }
};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);

5. 验证全平台启动
   分别执行以下命令验证各平台可以正常运行：

• iOS：npx react-native run-ios
• Android：npx react-native run-android
• macOS：npx react-native run-macos
• Windows：npx react-native run-windows

代码复用逻辑 #

和iOS、Android的平台适配逻辑完全一致，你可以通过.platform.js后缀区分平台特定代码，比如Component.macos.js对应macOS平台的组件实现、Component.windows.js对应Windows平台的组件实现，公用逻辑统一放在Component.js中即可，业务代码的复用率可以达到90%以上，完全符合React Native多平台代码共享的设计理念。

内容的提问来源于stack exchange，提问作者Mr. Robot