BlurLayer 玻璃模糊层

封装 @sbaiahmed1/react-native-blur 的 BlurView + 颜色 tint 双层, 对齐设计稿 backdrop-filter 二档 token(soft 10 / strong 40)。blurType 跟主题 scheme 自动切(亮 'light' / 暗 'dark'),避免暗色叠暗底变奶白雾。

实时预览

soft —— 玻璃数据条小区域(blurAmount 10)

soft blur

strong —— 焦点引导大面积 backdrop(blurAmount 40)

strong blur

用法

import { BlurLayer } from '@unif/react-native-design';

{/* GlassStats 玻璃数据条 backdrop */}
<View style={{ position: 'relative' }}>
  <BlurLayer intensity="soft" />
  <View>...</View>
</View>

{/* BottomSheet blur backdrop(@gorhom backdropComponent 内用) */}
function BlurBackdrop(props) {
  return (
    <BottomSheetBackdrop {...props} opacity={1} style={[props.style, { backgroundColor: 'transparent' }]}>
      <BlurLayer intensity="strong" />
    </BottomSheetBackdrop>
  );
}

{/* 自定义 tint override */}
<BlurLayer intensity="soft" tint="rgba(255,255,255,0.3)" />

API

Prop	Type	默认	说明
intensity	'soft' | 'strong'	—	模糊强度(必传)。'soft' 对齐 blur(10),'strong' 对齐 blur(40)
tint	string?	推算	不传按 intensity 推:soft → c.glassTintLight / strong → c.sheetBackdrop
style	ViewStyle?	StyleSheet.absoluteFill	附加样式,通常不需要传
testID	string?	—	E2E / 测试定位

设计稿对照

intensity	blurAmount	默认 tint	设计稿语义
soft	10	glassTintLight 0.55 白	玻璃数据条 / 小区域玻璃感(blur(10) saturate(160%))
strong	40	sheetBackdrop 0.72 浅灰	焦点引导大面积 backdrop(blur(40) saturate(180%))

CSS saturate(N%) 部分 RN BlurView 无对应 prop,在我们项目暂不实现。

不要

• ❌ 不要把 <BlurLayer> 放到没有相对定位的父容器内 —— absoluteFill 会撑到屏顶
• ❌ 不要传 hardcode blurAmount —— 走 intensity token,设计稿更新时单点改 theme/blur.ts