This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.
MaskedView
与 @react-native-masked-view/masked-view 兼容的蒙版视图。
一个与 @react-native-masked-view/masked-view API 兼容的 MaskedView 组件。maskElement 的不透明像素会显示其后面的被遮罩内容；透明像素则会将其隐藏。
在内部，该组件会将任意 React Native 子元素桥接到平台特定的 @expo/ui 遮罩原语中：
- Android：使用
BlendMode.DstIn的 Jetpack Compose 图形层合成。 - iOS：SwiftUI
.mask修饰器。
安装
- npx expo install @expo/uiIf you are installing this in an existing React Native app, make sure to install expo in your project.
从 @react-native-masked-view/masked-view 迁移
- 将导入从
import MaskedView from '@react-native-masked-view/masked-view'更新为import { MaskedView } from '@expo/ui/community/masked-view'。 - 不支持
androidRenderingMode属性。基于 Compose 的实现始终使用离屏图形层，因此该属性没有对应项，并且已从公共类型中省略。 - Web 尚未实现。在 web 上，子元素会以未遮罩的方式渲染，并会记录一次性控制台警告。对于 web 目标，请优先使用适合你具体场景的 CSS 原语：
- 渐变文本 — 使用
background-clip: text，配合color: 'transparent'，并将 CSS 渐变/图片作为背景。 - Alpha 淡出 — 直接在内容视图上使用
mask-image: linear-gradient(...)（或WebkitMaskImage）。 - 形状遮罩（圆形、圆角矩形等）— 使用
clip-path: circle(...)/inset(...)/path(...)，或使用border-radius+overflow: 'hidden'。
- 渐变文本 — 使用
基本用法
import { MaskedView } from '@expo/ui/community/masked-view'; import { StyleSheet, Text, View } from 'react-native'; export default function MaskedViewExample() { return ( <MaskedView style={{ width: 300, height: 80 }} maskElement={ <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> <Text style={{ fontSize: 64, fontWeight: 'bold' }}>EXPO</Text> </View> }> <View style={[ StyleSheet.absoluteFill, { experimental_backgroundImage: 'linear-gradient(135deg, #FF3B30, #FF9500, #FFCC00, #34C759, #007AFF, #AF52DE)', }, ]} /> </MaskedView> ); }
Alpha 淡出遮罩
maskElement 只看 alpha 通道：不透明像素会显示内容，透明像素会隐藏内容。使用来自 expo-linear-gradient 的 LinearGradient，让它从不透明过渡到透明——例如下面从 'black' 到 'transparent'——即可沿某个轴方向淡出内容。
import { MaskedView } from '@expo/ui/community/masked-view'; import { LinearGradient } from 'expo-linear-gradient'; import { StyleSheet, View } from 'react-native'; export default function AlphaFadeExample() { return ( <MaskedView style={{ width: 300, height: 80, flexDirection: 'row' }} maskElement={ <LinearGradient colors={['black', 'transparent']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={StyleSheet.absoluteFill} /> }> <View style={{ flex: 1, backgroundColor: '#3D5A80' }} /> <View style={{ flex: 1, backgroundColor: '#DAA520' }} /> <View style={{ flex: 1, backgroundColor: '#E07A5F' }} /> </MaskedView> ); }
API
import { MaskedView } from '@expo/ui/community/masked-view';
Component
Type: React.Element<MaskedViewProps>
Renders children with the alpha channel of maskElement applied as a mask:
opaque pixels of maskElement reveal children, transparent pixels hide them.
API-compatible with @react-native-masked-view/masked-view.
Drop-in props for @react-native-masked-view/masked-view's MaskedView.