@uiw/react-native
Version:
UIW for React Native
64 lines (56 loc) • 1.26 kB
Markdown
MaskLayer 遮罩层
---
用于模态对话框,中的遮罩层。
### 基础示例
<!--DemoStart-->
```jsx
import React, { Component, Fragment } from 'react';
import { View, Text, Alert, SafeAreaView } from 'react-native';
import { Modal, Button, MaskLayer } from '@uiw/react-native';
export default () => {
const [visible, setVisible] = useState(true);
return (
<Fragment>
<MaskLayer
visible={visible}
onDismiss={() => {
setVisible(false);
}}>
<Text style={{color: '#fff'}}>展示内容</Text>
</MaskLayer>
<Button
onPress={() => {
setVisible(true);
}}>
{visible ? '隐藏模态框' : '显示模态框'}
</Button>
</Fragment>
);
}
```
<!--End-->
## Props
继承原生 Modal 属性 [`ModalProps`](https://facebook.github.io/react-native/docs/modal.html#props)
```typescript
interface MaskLayerProps extends RNModalProps {
/**
* 遮罩层是否禁止点击
* defult: `true`
*/
maskClosable?: boolean;
/**
* 是否隐藏
*/
visible?: boolean;
/**
* 遮罩层透明度
* defult: `0.6`
*/
opacity?: number;
/**
* 隐藏消除回调事件
*/
onDismiss?: () => void;
children?: JSX.Element;
}
```