React Native for Web 安装指南：从纯 Web 应用到多平台工程的完整起步方案

React Native for Web 安装指南从纯 Web 应用到多平台工程的完整起步方案【免费下载链接】react-native-webCross-platform React UI packages项目地址: https://gitcode.com/gh_mirrors/re/react-native-web本指南围绕 React Native for Web 官方文档中的 installation.md 展开系统讲解如何安装react-native-web运行时与babel-plugin-react-native-web构建优化插件并覆盖 Expo、Create React App 两条官方推荐的起步路径。阅读本文后你将掌握在纯 Web 应用与既有 React Native 应用中接入 React Native for Web 的最小安装步骤、构建优化原理以及把react-native别名到react-native-web的配置方法。React Native for Web 是一套运行在浏览器中的 React 组件与 API 兼容层其定位与项目描述一致一套跨平台的 React UI 包。它既可以支撑多平台应用与 React Native 原生工程共享代码也可以用于纯 Web 应用既可以被既有 React Web 应用增量采纳也可以与既有 React Native 应用集成同时还支持 Preact。本文所述安装内容均以当前仓库 packages/react-native-web/package.json版本 0.21.1为事实依据。安装核心依赖运行时依赖React Native for Web 以 React 生态为前提需要在项目中同时安装 React DOM 与react-native-webnpm install react-dom react-native-web根据 package.json 中的peerDependencies声明react-native-web要求react与react-dom的版本为^18.0.0 || ^19.0.0即 React 18 或 React 19 均可使用。同时main字段指向dist/cjs/index.js、module字段指向dist/index.js这意味着现代打包器webpack、Vite、Rollup 等会优先消费 ES Module 产物从而获得更优的 tree-shaking 效果。构建优化Babel 插件推荐官方文档明确建议为构建期优化安装 Babel 插件因为它承担两个关键职责将react-native导入路径重写为react-native-web并剔除应用未实际使用的模块保持包体积最小npm install --save-dev babel-plugin-react-native-web插件的具体实现位于 packages/babel-plugin-react-native-web/src/index.js。从源码结构看它通过getDistLocation将每个具名导入如StyleSheet、View重写为react-native-web/dist/exports/name的默认导入路径从而让打包器只打包应用真正引用的模块对于无法映射到moduleMap的导入则回退到react-native-web/dist/index入口。插件还支持commonjs: true选项用于将重写路径指向dist/cjs下的 CommonJS 构建适用场景是那些默认消费 CommonJS 产物的打包器。以 packages/babel-plugin-react-native-web/README.md 中的示例来说明重写效果// 重写前 import { StyleSheet, View } from react-native; // 重写后 import StyleSheet from react-native-web/dist/exports/StyleSheet; import View from react-native-web/dist/exports/View;需要注意的是react-native-web的内部路径并不稳定官方明确告诫不要依赖这些内部路径构建优化一律通过 Babel 插件完成。快速开始两条官方推荐路径使用 Expo官方首选Expo 是通用 React 应用的框架与平台。Expo for Web 底层即使用 React Native for Web同时提供大量额外的跨平台 API、内置 Web 构建优化并与更广泛的 React Native 生态兼容。官方文档将其定位为一般推荐方案尤其是当你未来可能走向多平台时Expo 会替你承担大量配置工作详见 multi-platform.md 中的建议。使用 Create React App纯 Web 起步Create React App 是搭建纯 Web React 应用的最简单方式之一其内置了对把react-native-web别名到react-native的支持npx create-react-app my-app cd my-app npm install react-native-web npm start需要指出的是文档同时给出建议一般情况下更推荐使用 Expo。Create React App 方案适合希望以最小成本获得一个纯 Web 应用、后续也不打算接入原生端的场景。深入从安装到跑通的关键配置安装完成后要让代码中的import ... from react-native在 Web 端正确解析还需要完成“别名”aliasing配置。这属于安装环节的天然延伸官方在 setup.md 中给出了覆盖各工具的完整做法这里摘录最核心的几种webpack 别名// webpack.config.js module.exports { // ...the rest of your config resolve: { alias: { react-native$: react-native-web } } }react-native$末尾的$表示仅精确匹配react-native这个模块名避免误伤react-native-*系列子包。当前仓库的示例工程 react-native-web-examples/next.config.js 中正是通过config.resolve.alias[react-native] react-native-web这一行完成 Next.js 下的别名映射可作为真实可运行的参考。Babel 别名babel-plugin-module-resolver{ plugins: [ [module-resolver, { alias: { ^react-native$: react-native-web } }] ] }Jest 测试别名{ moduleNameMapper: { ^react-native$: react-native-web } }Flow 类型别名[options] # Alias the package name module.name_mapper^react-native$ - react-native-webNode.js预渲染 / SSR 场景如果你需要在 Node 环境中预渲染应用例如服务端渲染或构建期渲染可以使用module-alias包// 先安装 module-alias 作为依赖 const moduleAlias require(module-alias); moduleAlias.addAliases({ react-native: require.resolve(react-native-web), }); moduleAlias();在既有 React Native 工程中集成如果已有 React Native 应用官方建议在多平台集成时优先参考 Expo 的实现同时注意三点使用Platform模块处理轻微的平台差异、使用*.web.js平台特定文件承载显著差异以及在 webpack 中同时配置别名与.web.js扩展名解析。完整的多平台 webpack 配置示例含 Babel loader 的include规则、图片 loader、入口与产物配置、extensions: [.web.js, .js]等可在 multi-platform.md 中找到这里不再赘述。安装完成后的验证路径用官方示例工程快速验证仓库中附带了一个可直接对照运行的示例工程 react-native-web-examples其pages目录下覆盖了view、text、text-input、image、pressable、modal等组件与 API 的演示页面。它的 next.config.js 提供了 webpack 别名配置的真实范本适合安装后逐页对照验证组件行为。确认已安装模块清单安装成功后可以通过 src/index.js 中导出的完整模块清单核对可用 API包括View、Text、TextInput、Image、ScrollView、Pressable、Modal、Switch等核心组件以及StyleSheet、Animated、AppRegistry、Dimensions、Platform、Linking、useWindowDimensions、useColorScheme等 API 与 Hooks。这些模块与 React Native 同名导出保持兼容你的既有react-native导入语句无需改动即可在 Web 端复用。给全屏应用的收尾样式若你的应用是带根ScrollView的全屏布局官方建议在 HTML 外壳中内联以下样式保证根元素正确撑满视口且由 ScrollView 接管滚动/* These styles make the body full-height */ html, body { height: 100%; } /* These styles disable body scrolling if you are using ScrollView */ body { overflow: hidden; } /* These styles make the root element full-height */ #root { display:flex; height:100%; }小结本指南完整覆盖了官方安装文档的全部内容运行时依赖react-domreact-native-web的安装、Babel 插件babel-plugin-react-native-web的安装与构建优化原理路径重写 按需模块裁剪、Expo 与 Create React App 两条官方推荐的起步路径并延伸讲解了安装后必需的别名配置与验证方法。当前仓库对应的版本为react-native-web0.21.1要求 React 18/19 与 React DOM 18/19。无论你的目标是纯 Web 应用还是与既有 React Native 工程共享代码的多平台应用上述安装与配置步骤都是后续开发的地基。【免费下载链接】react-native-webCross-platform React UI packages项目地址: https://gitcode.com/gh_mirrors/re/react-native-web创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考