@blobatar/ 反应本地化

反应本地和博览会适配器 斑点. 断相几何相.

安装

bun add @blobatar/react-native blobatar
npx expo install react-native-svg     # or: bun add react-native-svg

react-native-svg 是一个对等依赖,是实际绘制的。 每个 blobatar为 <Path> 财务报告和审定财务报表 <Circle> 元素,无梯度、过滤器或口罩.

博览会不需要别的了 博览会的应用程序是反应原生应用程序 react-native-svg 两者都是同一图书馆,所以没有 @blobatar/expo 软件包.

使用量

import { Blobatar } from "@blobatar/react-native";

function Avatar() {
  return <Blobatar name="username" size={48} />;
}

道具

其他任何东西都落在下面 <Svg>胜过道具 以上为来源.

与其他适配器两个不同

两者都是平台而不是一揽子方案.

size 需要时间. 在网络上,省略它让 CSS 大小元素和 视图框大小为页面决定的大小。 反应原生没有这样的 后退,所以一个不大小的blobatar是一个空白平方. 在这里默认是 选项,而创建默认的适配器是更改的适配器 图片。 核心是唯一一个默认被记录下来的地方.

运动是三个组成部分,不是道具. Blobatar 静地,并保持 这个包裹能画的最便宜的东西. MorphingBlobatar 动画变化 在表达之间. AnimatedBlobatar 添加上层闲置层 。 每一级 是一个单独的导出,所以捆绑者 放下那些从未命名的应用程序 大小的大门将所有三个分开.

animate 因此,这里意味着 狭义的东西在这里,在网络上,它 选择 "hover" 财务报告和审定财务报表 "always"触摸屏上没有盘旋, 所以它是一个布尔上 AnimatedBlobatar 没有什么别的东西可以拿它。 传过去 另两个是命名此软件包的编译错误, 这是最便宜的 学习区别的地方.

expression 工作满满。 静态姿势会进入几何结构 这就是为什么 它在这里生存 原因与它生存在弦API相同 设置 新的削减.

import { happy } from "blobatar/expression";

<Blobatar name="username" size={48} expression={happy} />;

表达式之间的打字

为了让变化从一个表达式变成下一个表达式而不是切入它, 使用情况 MorphingBlobatar它需要完全相同的道具.

import { MorphingBlobatar } from "@blobatar/react-native";
import { happy, sad } from "blobatar/expression";

<MorphingBlobatar name="username" size={48} expression={busy ? sad : happy} />;

300ms采用一种表达方式,400ms返回空闲状态 曲线网络使用, 它会打搅: 设置新的表达式部分方式 从脸部实际位置开始 没有动画 上马了.

这是第二个组成部分,而不是 morph 道具,其原因是 字节。 变形器大约1.1克B克齐佩德,一个组件上的道具是 无论有没有人通过,都可以从这个组件中达到, 所以每个应用 包括最常用的活字形的网格. 作为单独的导出,一个捆绑者将全部抛出,作为从未命名的应用程序.

闲置的地层仍然不存在,这不是朝它迈出的一步。 什么动作 这里的姿势,这是13个数字 在你控制的状态变化。 这个 空闲地层是6个按键框环路,锁定在 :hover,以及 :hover 没有意义 在触摸屏上.

闲地层

AnimatedBlobatar 在外形上加上环境运动:呼吸,bob, 眨眼,一眼,和两个循环 属于一个表达而不是 环境层, thinking锯木和 mad'震也.

import { AnimatedBlobatar } from "@blobatar/react-native/animated";

// a profile header, one large avatar
<AnimatedBlobatar name="ada" size={120} animate />

// a grid: only what the list says is on screen
<AnimatedBlobatar name={u.id} size={44} animate={visible.has(u.id)} />

animate 由你来驾驶, 这就是平台正在做的. 在网络上 闲置层被锁定在 :hover这既是美学的答案,也是 表演一。 触摸屏上没有悬浮; motion.css 这么说的 自己, 浪费每一个循环 @media not ((hover: hover) and (pointer: fine))。所以这个平台唯一的模式是 总是在,和 何时 成为您的应用程序可以回答的问题, 并绘制成滚动视图的组件 无法:屏幕焦点、列表可查看性、用户设置.

它默认为虚假,所以 AnimatedBlobatar 没有人告诉动画师是 仍然是blobatar,准确的说。 打开或关闭 坡道超过400米而不是 切换,这是样式表本身的切换.

它运行在UI线. 循环是重活的工作,所以一个侧边栏 所有动画都一时装满了 动画不会让每个blobatar产生反效果 在JS线上的每个框架。 事情就是这样的.

这是一个单独的切入点, @blobatar/react-native/animated,这是 保持依赖的可选性:

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 本地模块, 因此它不能读取设置本身, 您的应用程序已经可以 :

import { AccessibilityInfo } from "react-native";

const reduce = AccessibilityInfo.useReduceMotionEnabled();

<AnimatedBlobatar name="username" size={48} expression={mood} animate={!reduce} />;

// or, to drop the morph as well
const C = reduce ? Blobatar : MorphingBlobatar;
<C name="username" size={48} expression={mood} />;

无障碍

react-native-svg 没有 <title>这样 title 成为无障碍标签 在树根上 <Svg>数字 : accessible, (中文(简体) ), accessibilityLabel 财务报告和审定财务报表 accessibilityRole="image"。如果没有一个,树就隐藏在屏幕阅读器中 在两个平台上,这是同一个呼叫 aria-hidden 在网络上.

许可证

麻省理工学院