搭建 React Native 库

功能特性

  • 提供可扩展的极简库脚手架
  • 包含示例 React Native 应用,用于测试库代码
  • 支持 TypeScript,确保类型安全代码并提升开发体验
  • 兼容 Turbo Modules 和 Fabric
  • 支持 Android 端 Kotlin 开发与 iOS 端 Swift 开发
  • 支持使用 C++ 编写跨平台原生代码
  • 适配 Expo(适用于无原生代码且需网页支持的库)
  • 预配置 ESLint、Prettier、TypeScript、Lefthook 和 Release It 工具
  • 预配置 react-native-builder-bob,用于编译文件
  • 预配置 GitHub Actions,实现 CI 环境下的测试与代码检查

使用方法

要创建新项目,运行以下命令:

bash 复制代码
npx create-react-native-library@latest awesome-library

执行后会弹出几个关于项目的问题,回答完毕后会在名为 awesome-library 的文件夹中生成新项目。

演示说明

项目创建完成后,可在生成的 CONTRIBUTING.md 文件中查看开发流程。注意:若需使用传统原生模块和视图 API 而非新架构创建库,可使用 create-react-native-library 的 0.49.8 版本,命令如下:

bash 复制代码
npx create-react-native-library@0.49.8 awesome-library

本地库

默认模板适用于发布到 npm 的库,也可创建不发布、仅在本地应用中使用的本地库。

适用场景

  • 为应用开发原生库,且无需发布到 npm
  • 希望能轻松将库复制到其他项目
  • 使用单体仓库(monorepo),需将库代码与应用放在同一仓库
  • 使用 Expo,但需为原生模块和组件使用纯 React Native API

项目结构

包含本地库的应用结构示例如下:

bash 复制代码
MyApp
├── node_modules
├── modules              <-- 本地库存放目录
│   └── awesome-library  <-- 你的本地库
├── android
├── ios
├── src
├── index.js
└── package.json

创建方式

若在已包含 package.json 的现有项目中运行 create-react-native-library,工具会自动检测并询问是否创建本地库。也可通过 --local 参数明确指定创建本地库,命令如下:

bash 复制代码
npx create-react-native-library@latest awesome-library --local

核心优势

  • 升级 React Native 更便捷,无需担心 android 和 ios 文件夹中的自定义代码冲突
  • 可与带有自定义开发客户端的 Expo 托管项目配合使用
  • 便于复制到其他项目,或后续需要时发布
  • 无需从零编写库的脚手架代码
  • 适用于单体仓库,无需默认模板中的额外工具配置

自动链接机制

默认情况下,生成的库会通过对应协议自动链接到项目:使用 Yarn 时采用 link: 协议,使用 npm 时采用 file: 协议,配置如下:

bash 复制代码
"dependencies": {
  "react-native-awesome-library": "link:./modules/awesome-library"
}

该配置会在 node_modules 下创建库的符号链接,确保自动链接生效。若使用单体仓库或非标准项目结构,需根据实际配置手动设置库与应用的链接。

参考内容: Scaffold a React Native library

相关推荐
程序员大阳4 小时前
副队长JavaScript教程(50)-DOM:网页开发的起点
javascript·dom·es·节点·概念·document·关系
香芋芋圆9 小时前
iD-editor 详解|OSM官方在线编辑器,基于D3.js的轻量地图编辑器
开发语言·javascript·编辑器
晗夜未央11 小时前
任务队列反复失败,先分清重试、阻塞和结果待核对
开发语言·javascript
jktantan11 小时前
每个节点 41 字节:把一棵百万节点树拆进 14 个 typed array
前端·javascript·vue.js·算法·typescript
我命由我1234512 小时前
访客系统形式(有用户概念、无用户概念)
java·开发语言·前端·javascript·python·产品运营·产品经理
程序员大阳13 小时前
副队长JavaScript教程(65)-详解JSON:轻量级数据交换格式
javascript·json·序列化·反序列化·stringify·parse
paopaokaka_luck14 小时前
基于springboot+vue的益暖微光公益服务平台(DeepSeek公益助手、善款信息追溯、志愿服务积分闭环、ECharts运营分析、活动状态自动流转)
java·前端·javascript·spring boot·mysql·架构·echarts
栀椩14 小时前
Electron 内嵌页面跨域问题(CORS/PNA)解决全记录
前端·javascript·electron
SEO_juper15 小时前
Chrome 扩展一键查看当前页面 SEO 信息:不用切页面,点一下全出来
前端·javascript·chrome
Highcharts.js15 小时前
CSUN 2026|Highcharts无障碍数据与AI分享
javascript·人工智能·数据分析·highcharts·图表开发