如何防止用戶點擊疊加層？

Question

我有覆蓋位置absolute，它有backgroundColor它覆蓋整個屏幕。它覆蓋了幾個按鈕組件，我仍然可以通過疊加層進行點擊。

如何防止此行爲？我想先吞下疊加層上的所有點擊事件。

代碼：

// Overlay 
export default class Overlay extends Component { 
    render() { 
     return (
      <View style={styles.wrapper} /> 
     ); 
    } 
} 

const styles = StyleSheet.create({ 
    wrapper: { 
     position: "absolute", 
     top: 0, 
     left: 0, 
     bottom: 0, 
     right: 0, 
     backgroundColor: "black", 
     opacity: 0.7 
    } 
}); 

// Container 
export default class Container extends Component { 
    render() { 
     return (
      <View> 
       <Overlay /> 
       <Button onPress={() => this.doSomething()}> 
        <Text>Hello</Text> 
       </Button> 
      </View> 
     ); 
    } 
} 

Answer 1

• ，向1-你可以嘗試使用模態分量從反應原生
• 將2-包裝TouchableWithoutFeedback有你覆蓋周圍空白onPress，不要忘了給全高度和寬度TouchableWithoutFeedback

像

<TouchableWithoutFeedback/> 
    <Overlay/> 
<TouchableWithoutFeedback> 

Answer 2

將絕對位置組件寫入其他組件後，將其渲染到其他組件上。

export default class Container extends Component { 
     render() { 
      return (
       <View> 
        <Button onPress={() => this.doSomething()} title="Hello" /> 
        <Overlay /> // provide appropriate height and width to the overlay styles if needed... 
       </View> 
      ); 
     } 
    }