web-dev-qa-db-fra.com

Fermer réagir natale modale en cliquant sur superposition?

Est-il possible de fermer réagir natif modal en cliquant sur superposition lorsque l'option transparent est true? La documentation ne fournit rien à ce sujet. C'est possible?

javascriptreact-native
14
inferus-vv

Si j'ai bien compris, vous souhaitez fermer le modal lorsque l'utilisateur clique en dehors de celui-ci, n'est-ce pas? 

Si oui, j'ai recherché cela il y a quelque temps et la seule solution dont je me souvienne est celle-ci (celle que J'utilise depuis le début):

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,
    })
}

Explication

Il s’agit essentiellement d’utiliser TouchableOpacity dans l’ensemble de l’écran lorsque l’utilisateur clique pour fermer le modal. TouchableWithoutFeedback permet d'éviter que TouchableOpacity ne fonctionne à l'intérieur du modal.

Si vous avez une meilleure solution, partagez-la ici.

36
Gui Herzog

Nous pouvons y arriver en ajoutant:

import { TouchableOpacity } from 'react-native';
    <TouchableOpacity onPress={()=>this.setState({modalVisibilty:false})}>
    <View style={{opacity:0, flex:1 }}/>
    </TouchableOpacity>

sous la fenêtre et une autre ci-dessus et modifiez le style de mise en page pour adapter votre écran.

Explication:

Vous ferez 2 gros boutons cachés pour attraper le contact de l'utilisateur et changer l'état de visibilité modale à faux.

3
Simple Abstraction

Une autre solution:

// Modal.js
import React from 'react';
import {
  TouchableWithoutFeedback,
  StyleSheet,
  Modal,
  View,
} from 'react-native';
import t from 'prop-types';


class MyModal extends React.Component {
  static propTypes = {
    children: t.node.isRequired,
    visible: t.bool.isRequired,
    dismiss: t.func.isRequired,
    transparent: t.bool,
    animationType: t.string,
  };

  static defaultProps = {
    animationType: 'none',
    transparent: true,
  };

  render() {
    const { props } = this;
    return (
      <View>
        <Modal
          visible={props.visible}
          transparent={props.transparent}
          onRequestClose={props.dismiss}
          animationType={props.animationType}
        >
        <TouchableWithoutFeedback onPress={props.dismiss}>
          <View style={styles.modalOverlay} />
        </TouchableWithoutFeedback>

        <View style={styles.modalContent}>
          {props.children}
        </View>
        </Modal>
      </View>
    );
  }
}


const styles = StyleSheet.create({
  modalContent: {
    flex: 1,
    justifyContent: 'center',
    margin: '5%',
  },
  modalOverlay: {
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: 'rgba(0,0,0,0.5)'
  },
});


export default MyModal;

Exemple d'utilisation:

// SomeScreen.js
import React from 'react';
import { View, Text, Button } from 'react-native';

import Modal from './Modal';


class SomeScreen extends React.Component {
  state = {
    isModalVisible: false,
  };

  showModal = () => this.setState({ isModalVisible: true });
  hideModal = () => this.setState({ isModalVisible: false });

  render() {
    return (
      <View>
        <Button onPress={this.showModal} />
        <Modal
          visible={this.state.isModalVisible}
          dismiss={this.hideModal}
        >
          <Text>Hello, I am modal</Text>
        </Modal>
      </View>
    );
  }
}
3
sorrat

Salut, je me sers d’un popup léger react-native-easypopup. Il se ferme également lorsque vous appuyez sur hors popup.

npm i react-native-easypopup

0
yowovogu