React Native for Web：一套代码，同时跑移动端和网页

做前端开发的人都知道，维护多套代码是件痛苦的事。移动端用 React Native，网页端用 React，两套代码逻辑重复，改个功能要改两遍。React Native for Web 这个项目就是为了解决这个问题，让 React Native 的组件直接跑在浏览器里。

项目目前在 GitHub 上有 2.2 万 Star，是 Necolas 在维护，背后有 Meta 的支持。

它是怎么做到的？

React Native for Web 的思路很直接：把 React Native 的组件 API 映射到 Web 标准组件上。比如你在 React Native 里写的 View，它会自动转成 div；Text 转成 span；Image 转成 img。

你在代码里还是写 React Native 的语法，但运行的时候，它会在浏览器里渲染成标准的 HTML 和 CSS。对开发者来说，学习成本几乎为零，因为你已经会 React Native 了。

实际开发中怎么用？

用法很简单。先装包：

npm install react-native-web

然后在项目入口做一下配置，把 React Native 的组件指向 Web 版本的实现。现有的 React Native 代码基本不用改，直接跑。

官方提供了 monorepo 结构，包含几个核心包。主包就是 react-native-web，另外还有配套的工具链。构建、开发、测试都有现成的脚本，npm run build、npm run dev、npm run test 就能搞定。

什么场景适合用？

第一种是已经有一套 React Native 应用，想快速出一个网页版。这种情况下收益最明显，一套代码两个平台，省去大量重复工作。

第二种是新项目想同时覆盖移动端和网页端。从一开始就用 React Native for Web，可以避免后面再做适配的麻烦。

第三种是做组件库。如果你在开发跨平台的 UI 组件库，用这套方案可以让组件同时支持 Native 和 Web，对用户来说体验一致。

有什么限制？

说实话，这不是银弹。复杂的动画效果在 Web 上的表现和移动端还是有差异。一些依赖原生能力的功能，比如相机、GPS，在网页端需要用 Web API 重新实现。

另外，包体积会比纯 Web 方案大一些，因为它带了一层适配层。对性能要求极高的场景，需要做针对性优化。

还有就是社区生态的问题。虽然核心组件都支持，但一些第三方 React Native 库可能没有做 Web 适配，用的时候需要自己处理兼容性。

我的看法

如果你的团队同时做移动端和网页端，而且技术栈是 React Native，这个项目值得认真考虑。它不是那种"写一次到处完美运行"的方案，但确实能省掉大量重复劳动。

项目维护得不错，文档齐全，社区活跃。Meta 自己也在用这套方案，短期内不用担心弃坑的问题。

对于独立开发者或者小团队来说，一套代码覆盖两个平台，开发效率能提升不少。即使是大团队，在共享业务逻辑和状态管理层面也能获益。

建议先拿一个小模块试试水，验证一下在你的场景下效果如何，再决定是否全面迁移。

状态管理层面也能获益。

建议先拿一个小模块试试水，验证一下在你的场景下效果如何，再决定是否全面迁移。