nuke-mask

Mask

• category: Components
• chinese: 遮罩层
• type: 基本

---

设计思路

注意，该组件在安卓端存在较多bug，暂不推荐使用。

Mask 是 weex component mask 的封装实现。目前仅支持 native ，h5 无法调用。

API

参数	说明	类型	默认值
style	样式object

调用方法

/** @jsx createElement */
import {createElement, Component,render} from 'rax';
import {View,Text,Button,Mask} from 'nuke';
let App = class Demo extends Component {
    constructor() {
        super();
        this.state={
            maskVisible:false
        }
    }
    showMask = ()=>{
        this.setState({
            maskVisible:true
        })
    }
    hideMask =()=>{
        this.setState({
            maskVisible:false
        })
    }
    render() {
        return (
            <View style={styles.containner}>
                <Button type="primary" onPress={this.showMask}>打开浮层</Button>
                {
                    this.state.maskVisible ?
                    <Mask>
                        <View style={styles.bg}>
                            <Text style={styles.text}>遮罩层里的内容</Text>
                            <Button type="primary" onPress={this.hideMask}>确认</Button>
                        </View>
                    </Mask>
                    :null
                }
            </View>
        );
    }
}
const styles={
    mask:{
        
    },
    bg:{
        flex:1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor:'rgba(0,0,0,0.7)'

    },
    text:{
        color:'#ffffff'
    }
}
render(<App/>);