vite-plugin-react-native

Vite 插件，用于在 Web 环境中使用 React Native 代码，提供 React Native 到 Web 的兼容性支持。

功能特性

• ✅ 自动将 react-native 替换为 react-native-web
• ✅ 支持 React Native 扩展名解析（.web.js, .native.js 等）
• ✅ 提供 React Native 库的 Web 兼容实现：
  • react-native-safe-area-context - SafeArea 组件和 Hooks
  • react-native-screens - Screen 组件
  • use-latest-callback - 回调 Hook
• ✅ 支持 ESM 和 CommonJS 双模式
• ✅ 自动配置 Vite 优化选项

安装

npm install vite-plugin-react-native
# 或
yarn add vite-plugin-react-native
# 或
pnpm add vite-plugin-react-native

使用方法

ESM 模式（推荐）

// vite.config.js 或 vite.config.ts
import { defineConfig } from 'vite';
import { reactNative } from 'vite-plugin-react-native';

export default defineConfig({
  plugins: [
    reactNative(),
  ],
});

CommonJS 模式

// vite.config.js
const { defineConfig } = require('vite');
const { reactNative } = require('vite-plugin-react-native');

module.exports = defineConfig({
  plugins: [
    reactNative(),
  ],
});

支持情况

兼容的 React Native 库

• ✅ react-native → 自动替换为 react-native-web
• ✅ react-native-safe-area-context → Web 兼容实现
• ✅ react-native-screens → Web 兼容实现
• ✅ use-latest-callback → Web 兼容实现

Vite 版本支持

• Vite 4.x
• Vite 5.x
• Vite 6.x
• Vite 7.x

工作原理

该插件会：

1. 别名替换：将 react-native 自动替换为 react-native-web
2. 虚拟模块：为 React Native 特定库提供 Web 兼容的虚拟实现
3. 扩展名解析：支持 React Native 的文件扩展名约定（.web.js, .native.js 等）
4. 依赖优化：自动配置 Vite 的依赖预构建选项

开发

# 安装依赖
npm install

# 构建
npm run build

# 发布前会自动构建
npm publish

许可证

ISC

参与贡献

1. Fork 本仓库
2. 新建 Feat_xxx 分支
3. 提交代码
4. 新建 Pull Request