在React Native界面開發(fā)中, 如果使用絕對定位布局,在代碼運(yùn)行時(shí)的某個(gè)時(shí)刻有可能會(huì)遮蓋住它的下方的某個(gè)組件。這是因?yàn)榻^對定位只是說這個(gè)組件的位置由它父組件的邊框決定。 絕對定位的組件可以被認(rèn)為會(huì)覆蓋在它前面布局（JSX代碼順序）的組件的上方.

如果被遮蓋住的組件需要處理觸摸事件。比如我們在一個(gè)地圖組件上覆蓋了一個(gè)圖像組件用來顯示信息，又不想讓這個(gè)圖像組件影響用戶手指拖動(dòng)地圖的操作，這時(shí)就需要使用圖像組件從View組件繼承得到的pointerEvents屬性來解決這個(gè)問題.

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

none 發(fā)生在本組件與本組件的子組件上的觸摸事件都會(huì)交給本組件的父組件處理.

box-none 發(fā)生在本組件顯示范圍內(nèi),但不是子組件顯示范圍內(nèi)的事件交給本組件,在子組件顯示范圍內(nèi)交給子組件處理

box-only 發(fā)生在本組件顯示范圍內(nèi)的觸摸事件將全部由本組件處理,即使觸摸事件發(fā)生在本組件的子組件顯示范圍內(nèi)

auto 視組件的不同而不同,并不是所有的子組件都支持box-none和box-only兩個(gè)值,使用時(shí)最好測試下

下面是示例代碼:

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 //狀態(tài)機(jī)變量控制大按鈕是否工作};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'});//改變狀態(tài)機(jī)變量return;}console.log('big button will responde');this.setState({bigButtonPointerEvents: 'box-none'});//改變狀態(tài)機(jī)變量}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); 復(fù)制代碼

運(yùn)行效果:

運(yùn)行后,最開始時(shí) Big Button可以正常工作, 因?yàn)锽ig Button父組件中pointerEvent為null, 然后當(dāng)點(diǎn)擊小按鈕時(shí),這時(shí)候pointerEvent值為none 大按鈕就失效了。 當(dāng)再按小按鈕時(shí)，pointerEvent為 box-none, 大按鈕就又可以處理事件了.

運(yùn)行結(jié)果:

PS: 本來大按鈕并沒有單獨(dú)用一個(gè)View組件嵌套, 直接把pointerEvent屬性定義在大按鈕的Text組件上, 在Android設(shè)備上發(fā)現(xiàn)沒有效果, 有點(diǎn)不明覺厲了, 不知道是RN的Bug還是Android就是這種機(jī)制, 請大神解答了

更多精彩請關(guān)注微信公眾賬號(hào)likeDev,公眾賬號(hào)名稱：愛上Android。

總結(jié)

以上是生活随笔為你收集整理的React Native中pointerEvent属性的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。