@cat5th/vue-rn

用 Vue 3 写 React Native 应用。

@cat5th/vue-rn 是 Vue 3 的自定义渲染器，将 Vue 渲染到 React Native Fabric。 无需 React 组件、JSX 或学习新的 API——用熟悉的 createApp、``、ref 即可。

特性

• Vue 3 自定义渲染器 — 用熟悉的 createApp、``、ref/reactive 编写 RN 应用
• React Native Fabric 原生渲染 — 通过 @rasenjs/rn-dom 直接操作 RN 原生节点
• Vue Router 集成 — 内置 RouterLink 组件和 RN 适用的内存路由历史 createRNHistory()
• .vue SFC 转换 — 一行 Metro 配置（withVueRN 插件），直接使用 .vue 文件
• HMR 热更新 — 修改 .vue 文件自动热替换，组件状态保持不丢失
• CSS 工具类支持 — 内置 Tailwind CSS v3/v4、UnoCSS 的 class-to-style 解析器
• CSS Modules — 支持 `` 转换为 RN style 对象
• Web 兼容层 — 同一套组件可运行在浏览器（实验性）

⚡ 快速开始

完整步骤见 入门指南。以下是一个可运行的最小闭环。

1. 安装

npm install @cat5th/vue-rn @rasenjs/rn-dom vue vue-router

2. 配置 Metro

// metro.config.js
const { getDefaultConfig } = require('@react-native/metro-config')
const { withVueRN } = require('@cat5th/vue-rn/metro')

module.exports = withVueRN(getDefaultConfig(__dirname))

3. 添加类型声明

// env.d.ts
declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent, Record, unknown>
  export default component
}

RN 组件类型自动注册，无需手动引用 tags.d.ts。

4. 创建入口

// index.ts
import { createApp } from '@cat5th/vue-rn'
import App from './App.vue'
import { name as appName } from './app.json'

createApp(App).register(appName)

5. 第一个组件

  
    
      Hello from Vue 3 + RN!
    
  

6. 运行

npx react-native run-ios
# 或
npx react-native run-android

文档