反应原生液体玻璃 QQ
@callstack/liquid-glass 带来iOS 26 液相玻璃效果,在iOS上反应原生应用程序.
特征
- iOS 26 液态玻璃视觉效果
- QQ 可自定义的颜色
- QQ 两种效果模式:
clear财务报告和审定财务报表regular
文档
安装
npm install @callstack/liquid-glass
# or
yarn add @callstack/liquid-glass
[尖叫声] 请务必使用 Xcode QQ 26. 重新编译您的应用程序 .
[尖叫声] 此库不支持于 博览去。 。 。 .
使用量
import {
LiquidGlassView,
LiquidGlassContainerView,
isLiquidGlassSupported,
} from '@callstack/liquid-glass';
function MyComponent() {
return (
<LiquidGlassView
style={[
{ width: 200, height: 100, borderRadius: 20 },
!isLiquidGlassSupported && { backgroundColor: 'rgba(255,255,255,0.5)' },
]}
interactive
effect="clear"
>
<Text>Hello World</Text>
</LiquidGlassView>
);
}
// For combining multiple glass elements
function MergingGlassElements() {
return (
<LiquidGlassContainerView spacing={20}>
<LiquidGlassView style={{ width: 100, height: 100, borderRadius: 50 }} />
<LiquidGlassView style={{ width: 100, height: 100, borderRadius: 50 }} />
</LiquidGlassContainerView>
);
}
为了实现基于玻璃视图后方背景的自动文本色彩调整,使用 PlatformColor 从 react-native数字 :
[注] 玻璃似乎有大小限制来自动调整文字颜色. 如果玻璃取景高度为->=65,则不会自动适应其背后的材料.
import { PlatformColor } from 'react-native';
import { LiquidGlassView } from '@callstack/liquid-glass';
function MyComponent() {
return (
<LiquidGlassView style={{ padding: 20, borderRadius: 20 }}>
<Text style={{ color: PlatformColor('labelColor') }}>Hello World</Text>
</LiquidGlassView>
);
}
[注] 在不支持的iOS版本(低于iOS 26)上,它将使一个正常
View没有任何效果.
API 密码
isLiquidGlassSupported
一个布尔常数,表示当前设备是否支持液体玻璃效应.
import { isLiquidGlassSupported } from '@callstack/liquid-glass';
if (isLiquidGlassSupported) {
// Device supports liquid glass effect
} else {
// Provide fallback UI
}
液态GlassView - 道具
| Prop | 类型 | 默认 | 说明 |
|---|---|---|---|
interactive | boolean | false | 按下视图时启用触摸交互效果 |
effect | 'clear' | 'regular' | 'none' | 'regular' | 视觉效果模式 : 二. 支助 clear - 更透明的玻璃效果二. 支助 regular - 标准玻璃模糊效果二. 支助 none - 无玻璃效果(透明视图)说明: 改变这个属性动画将玻璃效果的物质化/去物质化 |
animated | boolean | true | 是否对玻璃效果进行动画修改 |
animationDuration | number | undefined | 玻璃效果动画持续时间以毫秒计. 如果省略,则使用默认的 UIKit 动画持续时间 |
tintColor | ColorValue | undefined | 叠加色线适用于玻璃效果. 接受任何反应的土著颜色格式(hex、rgba、已命名的颜色) |
colorScheme | 'light' | 'dark' | 'system' | 'system' | 色彩方案调整 : 二. 支助 light - 轻而易举二. 支助 dark - 黑暗的外观二. 支助 system - 遵循系统外观 |
液晶容器维尤 - 道具
| Prop | 类型 | 默认 | 说明 |
|---|---|---|---|
spacing | number | 0 | 儿童元素之间的距离,他们开始将其玻璃效应合并成综合效应 |
由 Calltack 制作
liquid-glass 是一个开源项目,将永远自由使用。 如果你觉得这很酷,请 显示它.
调用 一群反动和反动的本地怪人 联系我们 你好@ callstack.com 如果你需要帮忙的话 或者只是想打个招呼!
喜欢这个项目吗 加入队伍吧 谁为客户做惊人的事情 驱动 React Independent Open Source