react-native-masked-view

开放Beta测试文档 作为预发布开放Beta测试的一项内容，亚马逊提供了此技术文档。随着亚马逊收到反馈并对功能进行迭代，所描述的这些功能可能会发生变化。有关最新功能的信息，请参阅发行说明。

@amazon-devices/react-native-masked-view__masked-view提供了一个呈现蒙版视图的React组件。

安装
示例
API参考
- 组件
  - MaskedView属性
实现详情
支持的版本
其他资源

安装

在package.json文件中添加依赖项。

已复制到剪贴板。

   "dependencies": {
      ...
      "@amazon-devices/react-native-masked-view__masked-view": "~2.0.0"
   }

使用npm install命令重新安装package-lock.json文件。

示例

已复制到剪贴板。

import React from 'react';
import { Text, View } from 'react-native';
import MaskedView from '@amazon-devices/react-native-masked-view__masked-view';

const App = () => {
  return (
    <MaskedView
      style={{ flex: 1, flexDirection: 'row', height: '100%' }}
      maskElement={
        <View
          style={{
            // 透明背景，因为蒙版基于alpha通道。
            backgroundColor: 'transparent',
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
          }}
        >
          <Text
            style={{
              fontSize: 60,
              color: 'black',
              fontWeight: 'bold',
            }}
          >
            基本蒙版
          </Text>
        </View>
      }
    >
      {/* 显示在蒙版后面，您可以在此处放置任何内容，比如图像 */}
      <View style={{ flex: 1, height: '100%', backgroundColor: '#324376' }} />
      <View style={{ flex: 1, height: '100%', backgroundColor: '#F5DD90' }} />
      <View style={{ flex: 1, height: '100%', backgroundColor: '#F76C5E' }} />
      <View style={{ flex: 1, height: '100%', backgroundColor: '#e1e1e1' }} />
    </MaskedView>
  );
}

export default App

API参考

Vega上的@amazon-devices/react-native-masked-view__masked-view库增加了对下面列出的组件的支持。

组件

组件	描述
`MaskedView`	呈现蒙版视图的组件

MaskedView属性

属性	描述
`maskElement`	蒙版要素

实现详情

Vega上的MaskedView库支持MaskedView组件及官方文档中列出的该组件的所有属性，但Android专用的androidRenderingMode属性除外。

支持的版本

程序包名称	亚马逊NPM库版本	Vega OS内部版本号	Vega SDK版本	发行说明
`@amazon-devices/react-native-masked-view__masked-view`	2.0.1+0.3.1	`OS 1.1 (201010438050)`	0.20

其他资源

有关其他库的信息，请参阅支持的第三方库和服务。

Last updated: 2025年9月30日