React Native中pointerEvent属性

在React Native界面开发中, 如果使用绝对定位布局,在代码运行时的某个时刻有可能会遮盖住它的下方的某个组件。这是因为绝对定位只是说这个组件的位置由它父组件的边框决定。绝对定位的组件可以被认为会覆盖在它前面布局（JSX代码顺序）的组件的上方.

如果被遮盖住的组件需要处理触摸事件。比如我们在一个地图组件上覆盖了一个图像组件用来显示信息，又不想让这个图像组件影响用户手指拖动地图的操作，这时就需要使用图像组件从View组件继承得到的pointerEvents属性来解决这个问题.

**pointerEvents 是字符串类型的属性, 可以取值 none,box-none,box-only,auto.

none 发生在本组件与本组件的子组件上的触摸事件都会交给本组件的父组件处理.
box-none 发生在本组件显示范围内,但不是子组件显示范围内的事件交给本组件,在子组件显示范围内交给子组件处理
box-only 发生在本组件显示范围内的触摸事件将全部由本组件处理,即使触摸事件发生在本组件的子组件显示范围内
auto 视组件的不同而不同,并不是所有的子组件都支持box-none和box-only两个值,使用时最好测试下

下面是示例代码:

import React, { Component } from 'react';
import {AppRegistry,StyleSheet,Text,View
} from 'react-native';class AwesomeProject extends Component {constructor(props) {super(props); //必须有这句代码 父组件向子组件传递属性, 比如styles属性等this.state = {bigButtonPointerEvents: null //状态机变量控制大按钮是否工作};this.onBigButtonPressed = this.onBigButtonPressed.bind(this);this.onSmallButtonPressed = this.onSmallButtonPressed.bind(this);}onBigButtonPressed() {console.log('Big button pressed');}onSmallButtonPressed() {if (this.state.bigButtonPointerEvents === null) {console.log('big button will not responde');this.setState({bigButtonPointerEvents: 'none'});//改变状态机变量return;}console.log('big button will responde');this.setState({bigButtonPointerEvents: 'box-none'});//改变状态机变量}render() {return (//根View<View style={styles.container}pointerEvents='box-none'><Text style={styles.sButtonStyle}onPress={this.onSmallButtonPressed}>SmallButton</Text><View style={styles.bButtonStyle}pointerEvents={this.state.bigButtonPointerEvents}><Text style={{flex:1,fontSize: 20}}onPress={this.onBigButtonPressed}>BigButton</Text></View></View>);}
}const styles = StyleSheet.create({container: {   //根View样式flex: 1},sButtonStyle: {      // 小按钮的样式fontSize: 20,left: 130,top: 50,width: 150,height: 35,backgroundColor: 'green'},bButtonStyle: {     //大按钮的样式left: 130,top: 50,width: 150,height: 70,backgroundColor: 'grey',alignItems: 'center',}
});AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
复制代码