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

相关推荐
C澒2 小时前
Vue 项目渐进式迁移 React:组件库接入与跨框架协同技术方案
前端·vue.js·react.js·架构·系统架构
xiaoxue..2 小时前
合并两个升序链表 与 合并k个升序链表
java·javascript·数据结构·链表·面试
要加油哦~2 小时前
AI | 实践教程 - ScreenCoder | 多agents前端代码生成
前端·javascript·人工智能
一个public的class3 小时前
你在浏览器输入一个网址,到底发生了什么?
java·开发语言·javascript
青茶3603 小时前
php怎么实现订单接口状态轮询请求
前端·javascript·php
早點睡3903 小时前
高级进阶 ReactNative for Harmony 项目鸿蒙化三方库集成实战:react-native-video
react native·华为·harmonyos
火车叼位3 小时前
脚本伪装:让 Python 与 Node.js 像原生 Shell 命令一样运行
运维·javascript·python
VT.馒头3 小时前
【力扣】2727. 判断对象是否为空
javascript·数据结构·算法·leetcode·职场和发展
发现一只大呆瓜3 小时前
虚拟列表:从定高到动态高度的 Vue 3 & React 满分实现
前端·vue.js·react.js
鱼毓屿御4 小时前
如何给用户添加权限
前端·javascript·vue.js