react native mask 繪製

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 (
        <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
          <TouchableHighlight style={{borderWidth:1,borderColor:'#444444',borderRadius: 4,padding:4,backgroundColor:'#2aa6f9'}} underlayColor={'#f8f8f8'} onPress={this._changeMask.bind(this)}>
            <Text style={{color:'#ffffff'}}>Show Mask</Text>
          </TouchableHighlight>
          {maskView}
        </View>
      );  
  }

  _changeMask() {
    this.setState({
      'showMask': !this.state.showMask
    })
  }

  _renderMask() {
    if (this.state.showMask) {
      return (
        <View style={{position:'absolute',top:0,left:0,width:global.screenWidth,height:global.screenHeight,backgroundColor:'#000000',opacity:.45}}>
          <Text style={{width:global.screenWidth,height:global.screenHeight}} onPress={this._changeMask.bind(this)}></Text>
        </View>
      );
    } else {
      return null;
    }
  }
}

　　

有空的時候再詳細補充一下博客，最終作成一個picker的組件