# @blobatar/react-native 中文文档 规范地址：https://npmcn.com/package/%40blobatar/react-native/ 版本：2\.7\.0 npm 元数据更新时间：2026-08-29T14:01:19.086Z 中文译文更新时间：2026-11-08T07:06:19.835Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40blobatar/react-native 原文对照：https://npmcn.com/package/%40blobatar/react-native/?lang=original 项目主页：https://github.com/Alain00/blobatar#readme 源码仓库：https://github.com/Alain00/blobatar ## 关键信息（来自 npm 元数据） - 包体积（解压后）：136 kB，19 个文件 - 模块格式：ES Module - TypeScript 类型：包内自带 - 运行依赖：0 个 - peer 依赖：blobatar 2\.x，react \>=18，react-native \>=0\.76，react-native-reanimated \>=4，react-native-svg \>=15，react-native-worklets \>=0\.5 - 首次发布：2026-08-23T17:22:16.862Z - 最新版本发布：2026-08-29T14:01:18.688Z - 近 30 天下载量：10701（2026-10-09 至 2026-11-07，npm 官方下载统计） - 已发布版本数：3（近 12 个月 3 个） ## 中文简介 反应 Blobatar 的本地和博览会适配器 。 定相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相. ## 安装 ```sh npm install @blobatar/react-native ``` 也可以使用：`pnpm add @blobatar/react-native`、`yarn add @blobatar/react-native`、`bun add @blobatar/react-native` ## README # @blobatar/ 反应本地化 反应本地和博览会适配器 [斑点](https://github.com/Alain00/blobatar). 断相几何相. ## 安装 ```sh bun add @blobatar/react-native blobatar npx expo install react-native-svg # or: bun add react-native-svg ``` `react-native-svg` 是一个对等依赖,是实际绘制的。 每个 blobatar为 `` 财务报告和审定财务报表 `` 元素,无梯度、过滤器或口罩. 博览会不需要别的了 博览会的应用程序是反应原生应用程序 `react-native-svg` 两者都是同一图书馆,所以没有 `@blobatar/expo` 软件包. ## 使用量 ```tsx import { Blobatar } from "@blobatar/react-native"; function Avatar() { return ; } ``` ## 道具 | Prop | 类型 | 说明 | | --- | --- | --- | | `name` | `string` | **要求.** 谁的blobatar是为. | | `size` | `number` | **这里有要求.** 宽而高以分. | | `background` | `string | false` | 背景风格. | | `palette` | `Palette` | 色彩覆盖 . | | `hue` | `number` | 把它拉起来. | | `tone` | `number` | 收声. | | `normalize` | `boolean` | 将名字规范化. | | `contrast` | `boolean` | 执行对比保证. | | `title` | `string` | 可访问标签 . | | `expression` | `Expression` | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}要变身了. | | `animate` | `boolean` | **`AnimatedBlobatar` 仅限**从 `@blobatar/react-native/animated`运行闲地层。 默认为假. | | `traits` | `TraitOverrides` | 超越特定特征. | 其他任何东西都落在下面 ``胜过道具 以上为来源. ## 与其他适配器两个不同 两者都是平台而不是一揽子方案. **`size` 需要时间.** 在网络上,省略它让 CSS 大小元素和 视图框大小为页面决定的大小。 反应原生没有这样的 后退,所以一个不大小的blobatar是一个空白平方. 在这里默认是 选项,而创建默认的适配器是更改的适配器 图片。 核心是唯一一个默认被记录下来的地方. **运动是三个组成部分,不是道具.** `Blobatar` 静地,并保持 这个包裹能画的最便宜的东西. `MorphingBlobatar` 动画变化 在表达之间. `AnimatedBlobatar` 添加上层闲置层 。 每一级 是一个单独的导出,所以捆绑者 放下那些从未命名的应用程序 大小的大门将所有三个分开. `animate` 因此,这里意味着 狭义的东西在这里,在网络上,它 选择 `"hover"` 财务报告和审定财务报表 `"always"`触摸屏上没有盘旋, 所以它是一个布尔上 `AnimatedBlobatar` 没有什么别的东西可以拿它。 传过去 另两个是命名此软件包的编译错误, 这是最便宜的 学习区别的地方. `expression` 工作满满。 静态姿势会进入几何结构 这就是为什么 它在这里生存 原因与它生存在弦API相同 设置 新的削减. ```tsx import { happy } from "blobatar/expression"; ; ``` ## 表达式之间的打字 为了让变化从一个表达式变成下一个表达式而不是切入它, 使用情况 `MorphingBlobatar`它需要完全相同的道具. ```tsx import { MorphingBlobatar } from "@blobatar/react-native"; import { happy, sad } from "blobatar/expression"; ; ``` 300ms采用一种表达方式,400ms返回空闲状态 曲线网络使用, 它会打搅: 设置新的表达式部分方式 从脸部实际位置开始 没有动画 上马了. **这是第二个组成部分,而不是 `morph` 道具**,其原因是 字节。 变形器大约1.1克B克齐佩德,一个组件上的道具是 无论有没有人通过,都可以从这个组件中达到, 所以每个应用 包括最常用的活字形的网格. 作为单独的导出,一个捆绑者将全部抛出,作为从未命名的应用程序. 闲置的地层仍然不存在,这不是朝它迈出的一步。 什么动作 这里的姿势,这是13个数字 在你控制的状态变化。 这个 空闲地层是6个按键框环路,锁定在 `:hover`,以及 `:hover` 没有意义 在触摸屏上. ## 闲地层 `AnimatedBlobatar` 在外形上加上环境运动:呼吸,bob, 眨眼,一眼,和两个循环 属于一个表达而不是 环境层, `thinking`锯木和 `mad`'震也. ```tsx import { AnimatedBlobatar } from "@blobatar/react-native/animated"; // a profile header, one large avatar // a grid: only what the list says is on screen ``` **`animate` 由你来驾驶, 这就是平台正在做的.** 在网络上 闲置层被锁定在 `:hover`这既是美学的答案,也是 表演一。 触摸屏上没有悬浮; `motion.css` 这么说的 自己, 浪费每一个循环 `@media not ((hover: hover) and (pointer: fine))`。所以这个平台唯一的模式是 总是在,和 _何时_ 成为您的应用程序可以回答的问题, 并绘制成滚动视图的组件 无法:屏幕焦点、列表可查看性、用户设置. 它默认为虚假,所以 `AnimatedBlobatar` 没有人告诉动画师是 仍然是blobatar,准确的说。 打开或关闭 坡道超过400米而不是 切换,这是样式表本身的切换. **它运行在UI线.** 循环是重活的工作,所以一个侧边栏 所有动画都一时装满了 动画不会让每个blobatar产生反效果 在JS线上的每个框架。 事情就是这样的. 这是一个单独的切入点, `@blobatar/react-native/animated`,这是 保持依赖的可选性: ```sh npx expo install react-native-reanimated react-native-worklets ``` 使用 `expo install` 而不是说 `npm install` 如果你在博览会。 工作船 一个必须匹配的 JavaScript 半和本地半 **没错**在博览会上 原生半部分是您所编译的 SDK 二进制程序, 所以一个版本 npm 欢乐地继续抛出 `Mismatch between JavaScript part and native part` 在第一个渲染。 重新激活是原生模块 无论是哪种方式,所以这需要一个 开发建设; 博览会Go不会运行它. 只有这个子路径需要他们. `Blobatar` 财务报告和审定财务报表 `MorphingBlobatar` 来自 软件包根和链接都没有, 因此在列表中仍画出一个应用程序 安装任何本地动画库. 成本是真实的,值得指出:现在循环存在两次,一次在 `blobatar/idle` 并且曾经在适配器中工作过, 因为工作不能 调用导入的函数. `packages/harness` 双双横扫一圈 说他们完全一致 所以抄录错误是测试失败 而不是在设备上发现的东西 摆姿势是故意的 _没有_ 复制: 它留在核心中, 运行在 JavaScript, 因为一个形态是一个 一发300米的转速 而不是循环. 种子时间和样式表读的一样, 所以一个blobatar 两个月台上同一面的呼吸 网格是人群 而不是一个心跳. ### 减少动议 过 `animate={!reduceMotion}`,或提供 `Blobatar` 换句话说 这个包 导入完全没有 React 本地模块, 因此它不能读取设置本身, 您的应用程序已经可以 : ```tsx import { AccessibilityInfo } from "react-native"; const reduce = AccessibilityInfo.useReduceMotionEnabled(); ; // or, to drop the morph as well const C = reduce ? Blobatar : MorphingBlobatar; ; ``` ## 无障碍 `react-native-svg` 没有 ``这样 `title` 成为无障碍标签 在树根上 ``数字 : `accessible`, (中文(简体) ), `accessibilityLabel` 财务报告和审定财务报表 `accessibilityRole="image"`。如果没有一个,树就隐藏在屏幕阅读器中 在两个平台上,这是同一个呼叫 `aria-hidden` 在网络上. ## 许可证 麻省理工学院 ## 常见问题 ### @blobatar/react-native 是什么？ 反应 Blobatar 的本地和博览会适配器 。 定相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相\. ### 如何安装 @blobatar/react-native？ 在项目目录运行 npm install @blobatar/react-native，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：blobatar（2\.x）、react（\>=18）、react-native（\>=0\.76）、react-native-svg（\>=15）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @blobatar/react-native 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @blobatar/react-native 支持 ESM 还是 CommonJS？ 以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。 ### @blobatar/react-native 可以商用吗？ @blobatar/react-native 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @blobatar/react-native 的下载量有多少？ 根据 npm 官方下载统计，@blobatar/react-native 在 2026/10/09 – 2026/11/07 这 30 天内被下载 10,701 次，日均约 357 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @blobatar/react-native 还在维护吗？ 最新版本 2\.7\.0 发布于 2026/08/29（2 个月前）；至今共发布 3 个版本，其中过去 12 个月发布了 3 个；首次发布于 2026/08/24。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。