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

相关推荐
DevUI团队10 分钟前
解锁前端高阶调试:浏览器/IDE/Git技巧分享
前端·javascript·html
用户81686947472517 分钟前
React 事件系实现
前端·react.js
CoolerWu20 分钟前
Trae Solo 实战指南:从"会用"到"用好"的协作方法论
前端·javascript
鹏多多29 分钟前
轻量+响应式!React瀑布流插件react-masonry-css的详细教程和案例
前端·javascript·react.js
一颗宁檬不酸34 分钟前
Vue.js 初学者基础知识点总结 第一弹
前端·javascript·vue.js
xiaoxue..36 分钟前
解析 LocalStorage与事件委托在前端数据持久化中的应用
前端·javascript·面试
j***894637 分钟前
MySQL数据的增删改查(一)
android·javascript·mysql
Blossom.11838 分钟前
基于Mamba-2的实时销量预测系统:如何用选择性状态空间干掉Transformer的O(n²)噩梦
人工智能·python·深度学习·react.js·机器学习·设计模式·transformer
@cc小鱼仔仔1 小时前
vue 知识点
前端·javascript·vue.js
特级业务专家1 小时前
《终章:从 Vite 专用到全构建工具生态 - 我的字体插件如何征服 Webpack、Rollup 全栈》
前端·javascript·vue.js