搭建 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-library0.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 更便捷,无需担心 androidios 文件夹中的自定义代码冲突
  • 可与带有自定义开发客户端的 Expo 托管项目配合使用
  • 便于复制到其他项目,或后续需要时发布
  • 无需从零编写库的脚手架代码
  • 适用于单体仓库,无需默认模板中的额外工具配置

自动链接机制

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

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

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

参考内容: Scaffold a React Native library

相关推荐
毕设源码-邱学长15 分钟前
【开题答辩全过程】以 基于Vue的爱心公益募捐平台的设计与实现为例,包含答辩的问题和答案
前端·javascript·vue.js
前端小白在前进41 分钟前
力扣刷题:千位分割数
javascript·算法·leetcode
Hilaku1 小时前
那个把代码写得亲妈都不认的同事,最后被劝退了🤷‍♂️
前端·javascript·代码规范
Dragon Wu1 小时前
TanStack Query(React Query) 常用api及操作总结
前端·javascript·前端框架
喵个咪1 小时前
开箱即用的 GoWind Admin|风行,企业级前后端一体中后台框架:用 JavaScript/Lua 解锁动态业务扩展能力
javascript·go·lua
BD_Marathon1 小时前
Vue3_插值表达式
javascript
前端达人1 小时前
原生JavaScript vs 前端框架,2026年该怎么选?
开发语言·前端·javascript·前端框架·ecmascript
漫天黄叶远飞1 小时前
React 组件通讯全攻略:拒绝 "Props" 焦虑,掌握数据流动的艺术
前端·react.js·前端框架
AAA阿giao1 小时前
JavaScript 中 this 的终极解析:从 call、bind 到箭头函数的深度探索
前端·javascript·ecmascript 6
inCBle1 小时前
vue2 封装一个自动校验是否溢出的 tooltip 自定义指令
前端·javascript·vue.js