# @amazon-devices/react-native-masked-view\_\_masked-view 中文文档

规范地址：https://npmcn.com/package/%40amazon-devices/react-native-masked-view__masked-view/

版本：2\.0\.9000000003
npm 元数据更新时间：2026-10-29T18:37:39.503Z
中文译文更新时间：2026-11-06T08:31:13.978Z
软件包许可：See license in LICENSE

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40amazon-devices/react-native-masked-view__masked-view
原文对照：https://npmcn.com/package/%40amazon-devices/react-native-masked-view__masked-view/?lang=original
项目主页：https://github.com/react-native-masked-view/masked-view#readme
源码仓库：https://github.com/react-native-masked-view/masked-view

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：1.1 MB，34 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：react \*，react-native \*，@amazon-devices/react-native-kepler \*
- 首次发布：2025-09-25T06:10:35.713Z
- 最新版本发布：2026-10-29T18:37:39.223Z
- 近 30 天下载量：3828（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：7（近 12 个月 5 个）

## 中文简介

反应原生 MaskedView 组件

## 安装

```sh
npm install @amazon-devices/react-native-masked-view__masked-view
```

也可以使用：`pnpm add @amazon-devices/react-native-masked-view__masked-view`、`yarn add @amazon-devices/react-native-masked-view__masked-view`、`bun add @amazon-devices/react-native-masked-view__masked-view`

## README

# 原生反应 `MaskedView`

[![Build Status](https://github.com/react-native-masked-view/masked-view/workflows/Build/badge.svg)](https://github.com/react-native-masked-view/masked-view/actions) [![Version](https://img.shields.io/npm/v/@react-native-masked-view/masked-view.svg?style=flat-square)](https://www.npmjs.com/package/@react-native-masked-view/masked-view) [![MIT License](https://img.shields.io/npm/l/@react-native-masked-view/masked-view.svg?style=flat-square)](https://opensource.org/licenses/MIT) [![Lean Core Badge](https://img.shields.io/badge/Lean%20Core-Extracted-brightgreen.svg?style=flat-square)](https://github.com/facebook/react-native/issues/23313)

提供使遮蔽视图的回放组件 .

## 支持的平台

-   [x] iOS系统
-   [x] 机器人
-   [ ] 网页

## 开始

```sh
yarn add @react-native-masked-view/masked-view
```

或者说

```sh
npm install --save @react-native-masked-view/masked-view
```

### 使用本地反应 0.60

不需要手动连接软件包 [自动链接](https://github.com/react-native-masked-view/cli/blob/master/docs/autolinking.md)。 。 。 .

记得安装起落架 :

```sh
npx pod-install
```

### 使用本地反应 < 0.60

然后,您需要将库的本地部分链接到你使用的平台。 链接库的最简单方式是使用 CLI 工具, 从您的工程根运行此命令 :

```sh
react-native link @react-native-masked-view/masked-view
```

## 使用量

导入 `MaskedView` 构成部分从 `@react-native-masked-view/masked-view` 像这样使用它:

```jsx
import React from 'react';
import { Text, View } from 'react-native';
import MaskedView from '@react-native-masked-view/masked-view';

const App = () => {
  return (
    <MaskedView
      style={{ flex: 1, flexDirection: 'row', height: '100%' }}
      maskElement={
        <View
          style={{
            // Transparent background because mask is based off alpha channel.
            backgroundColor: 'transparent',
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
          }}
        >
          <Text
            style={{
              fontSize: 60,
              color: 'black',
              fontWeight: 'bold',
            }}
          >
            Basic Mask
          </Text>
        </View>
      }
    >
      {/* Shows behind the mask, you can put anything here, such as an image */}
      <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
```

下面的图像表明,你几乎可以把任何东西放在面具后. 三个例子都被掩盖了 `<View>`, (中文(简体) ), `<Text>`,以及 `<Image>`。 。 。 .

![](https://npmcn.com/package/%40amazon-devices/react-native-masked-view__masked-view/img/example.png)

### 道具

-   [查看道具...](https://github.com/facebook/react-native-website/blob/master/docs/view.md#props)
    
-   [`maskElement`](https://npmcn.com/package/%40amazon-devices/react-native-masked-view__masked-view/#readme-maskelement)
    
-   [`androidRenderingMode`](https://npmcn.com/package/%40amazon-devices/react-native-masked-view__masked-view/#readme-androidrenderingmode)
    

### 参考文献

### `maskElement`

| 类型 | 需求 |
| --- | --- |
| 元素 | 对 |

### `androidRenderingMode`

默认 `hardware` 渲染模式将被用于最佳性能,但如果您需要激活您的动能 `maskElement` 然后您需要切换到 `software` 让你的面具更新。 这个道具只影响Android.

| 类型 | 需求 | 默认 |
| --- | --- | --- |
| `software`, (中文(简体) ), `hardware` | 没有 | `hardware` |

## 常见问题

### @amazon-devices/react-native-masked-view\_\_masked-view 是什么？

反应原生 MaskedView 组件

### 如何安装 @amazon-devices/react-native-masked-view\_\_masked-view？

在项目目录运行 npm install @amazon-devices/react-native-masked-view\_\_masked-view，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\*）、react-native（\*）、@amazon-devices/react-native-kepler（\*）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @amazon-devices/react-native-masked-view\_\_masked-view 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @amazon-devices/react-native-masked-view\_\_masked-view 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @amazon-devices/react-native-masked-view\_\_masked-view 可以商用吗？

@amazon-devices/react-native-masked-view\_\_masked-view 使用 See license in LICENSE 许可。许可条款写在包内的独立文件中，请阅读该文件确认可否商用。以上为概括，不构成法律意见，请以许可原文为准。

### @amazon-devices/react-native-masked-view\_\_masked-view 的下载量有多少？

根据 npm 官方下载统计，@amazon-devices/react-native-masked-view\_\_masked-view 在 2026/10/06 – 2026/11/04 这 30 天内被下载 3,828 次，日均约 128 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @amazon-devices/react-native-masked-view\_\_masked-view 还在维护吗？

最新版本 2\.0\.9000000003 发布于 2026/10/30（9 天前）；至今共发布 7 个版本，其中过去 12 个月发布了 5 个；首次发布于 2025/09/25。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。