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的组件