react native 以下简称RN。

RN的mask绘制，主要是什么时候出发mask层的绘制。

比如，被某一个state改变触发了。触发后按照RN的渲染规则，应当是重新render，重新render时什么mask层如果要全屏遮罩，那么应该放到render渲染的最后一处渲染，也就是绝对定位后，从左上0绘制一个透明的view覆盖当前屏幕的宽高。

 

实现的一个例子，点击按钮触发mask，点击mask再取消。

 

 

这个例子虽然很简单，但是可以用来熟悉RN的界面渲染机制，都是通过state来控制的。这也是符合RN风格的一种渲染机制，个人认为setNativeProps不是一个好的方法，官方也明确说明在setState + shouldComponentUpdate 确实无法达到性能要求，那可以尝试使用setNativeProps。

以下是上面那个例子的全部代码：

import React, { Component } from 'react';import {  AppRegistry,  StyleSheet,  Text,  TouchableHighlight,  TouchableWithoutFeedback,  View} from 'react-native';const Dimensions = require('Dimensions');global.screenWidth = Dimensions.get('window').width;global.screenHeight = Dimensions.get('window').height;export default class rnPicker extends Component {  constructor(props) {    super(props);    this.state = {      showMask: false    };  }  render() {    let maskView = this._renderMask();    return (        
               
                  
       
        Show Mask
                 
                {maskView}        
           );    }  _changeMask() {    this.setState({      'showMask': !this.state.showMask    })  }  _renderMask() {    if (this.state.showMask) {      return (        
               
              
           );    } else {      return null;    }  }}

　　

有空的时候再详细补充一下博客，最终做成一个picker的组件