# vite-plugin-react-native

**Repository Path**: ws18250840411/vite-plugin-react-native

## Basic Information

- **Project Name**: vite-plugin-react-native
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-10
- **Last Updated**: 2026-01-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 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 优化选项

## 安装

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

## 使用方法

### ESM 模式（推荐）

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

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

### CommonJS 模式

```javascript
// 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 的依赖预构建选项

## 开发

```bash
# 安装依赖
npm install

# 构建
npm run build

# 发布前会自动构建
npm publish
```

## 许可证

ISC

## 参与贡献

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