搭建 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

相关推荐
AAA阿giao1 天前
从零拆解一个 React + TypeScript 的 TodoList:模块化、数据流与工程实践
前端·react.js·ui·typescript·前端框架
hedley(●'◡'●)1 天前
基于cesium和vue的大疆司空模仿程序
前端·javascript·vue.js·python·typescript·无人机
百思可瑞教育1 天前
构建自己的Vue UI组件库:从设计到发布
前端·javascript·vue.js·ui·百思可瑞教育·北京百思教育
CappuccinoRose1 天前
JavaScript 学习文档(二)
前端·javascript·学习·数据类型·运算符·箭头函数·变量声明
全栈前端老曹1 天前
【MongoDB】深入研究副本集与高可用性——Replica Set 架构、故障转移、读写分离
前端·javascript·数据库·mongodb·架构·nosql·副本集
NCDS程序员1 天前
v-model: /v-model/ :(v-bind)三者核心区别
前端·javascript·vue.js
果粒蹬i1 天前
【HarmonyOS】DAY8:React Native for OpenHarmony 实战:多端响应式布局与高可用交互设计
react native·交互·harmonyos
小杨同学呀呀呀呀1 天前
Ant Design Vue <a-timeline>时间轴组件失效解决方案
前端·javascript·vue.js·typescript·anti-design-vue
qq_532453531 天前
使用 Three.js 构建沉浸式全景图AR
开发语言·javascript·ar
Mr Xu_1 天前
告别冗长 switch-case:Vue 项目中基于映射表的优雅路由数据匹配方案
前端·javascript·vue.js