---
name: "CoverView"
mode: "component"
versionRequirements:
  - { name: "@ray-js/ray", version: "0.5.10" }
title: "CoverView - 覆盖在原生组件之上的文本视图"
---

## CoverView

> [VERSION] @ray-js/ray >= 0.5.10

### 描述

覆盖在原生组件之上的视图容器，可覆盖 Map、Video 等原生组件。


### 示例代码

#### 基础用法

```tsx
import React from 'react';
import { CoverView, Map, Text } from '@ray-js/ray';

export default function BasicCoverView() {
  return (
    <Map
      longitude={120.15}
      latitude={30.28}
      scale={14}
      style={{ width: '100%', height: '400rpx' }}
    >
      <CoverView
        style={{
          position: 'absolute',
          bottom: '20rpx',
          left: '20rpx',
          right: '20rpx',
          padding: '20rpx',
          backgroundColor: 'rgba(0,0,0,0.6)',
          borderRadius: '8rpx',
        }}
      >
         覆盖在地图上的文字
      </CoverView>
    </Map>
  );
}
```