Đóng phản ứng phương thức gốc bằng cách nhấp vào lớp phủ?

Question

Bạn có thể đóng react native modal bằng cách nhấp vào lớp phủ khi tùy chọn transparent là true? Tài liệu không cung cấp bất cứ điều gì về nó. Có thể không?

Answer 1

Nếu tôi hiểu chính xác, bạn muốn đóng phương thức khi người dùng nhấp vào bên ngoài, đúng không?

Nếu có, tôi đã tìm kiếm cho việc này một thời gian trước và giải pháp duy nhất mà tôi nhớ là một trong này (đó là một trong đó Tôi đã sử dụng cho đến nay):

render() { 
    if (!this.state.modalVisible) 
    return null 
    return (
    <View> 
     <Modal 
      animationType="fade" 
      transparent={true} 
      visible={this.state.modalVisible} 
      onRequestClose={() => {this.setModalVisible(false)}} 
     > 
      <TouchableOpacity 
      style={styles.container} 
      activeOpacity={1} 
      onPressOut={() => {this.setModalVisible(false)}} 
      > 
      <ScrollView 
       directionalLockEnabled={true} 
       contentContainerStyle={styles.scrollModal} 
      > 
       <TouchableWithoutFeedback> 
       <View style={styles.modalContainer}> 
        // Here you put the content of your modal. 
       </View> 
       </TouchableWithoutFeedback> 
      </ScrollView> 
      </TouchableOpacity> 
     </Modal> 
    </View> 
) 
} 

// Then on setModalVisible(), you do everything that you need to do when closing or opening the modal. 
setModalVisible(visible) { 
    this.setState({ 
     modalVisible: visible, 
    }) 
} 

Giải thích

Điều này về cơ bản là sử dụng TouchableOpacity trong toàn bộ màn hình để có được khi người dùng nhấp để đóng phương thức. TouchableWithoutFeedback là để tránh TouchableOpacity hoạt động bên trong Modal.

Nếu bạn có giải pháp tốt hơn, vui lòng chia sẻ tại đây.

Answer 2

Chúng tôi có thể làm việc nó ra bằng cách thêm:

<touchableObacity onPress={()=>this.setState({modalVisibilty:false})}> 
<View style={{opacity:0, flex:1 }}/> 
</touchableOpacity> 

dưới cửa sổ và một số khác ở trên và thay đổi phong cách bố trí để phù hợp với màn hình của bạn.

Giải thích:

Bạn sẽ tạo 2 nút ẩn lớn để bắt người dùng chạm và thay đổi trạng thái hiển thị phương thức thành sai.