Comment fermer le modal imbriqué dans un autre composant personnalisé ?

Question

Comment fermer un modal imbriqué dans un autre composant personnalisé ? Mon modal est dans un autre composant. J'ai un problème pour transmettre l'état au composant parent. Vous pouvez voir les composants parent et enfant ci-dessous.

Composant Parent :

const ViewNote = ({route, navigation}) => {
  const [visible, setVisible] = useState(false);

  function visibility(cases) {
    setVisible(cases);
    console.log(cases);
  }

  return (
    <View style={styles.noteContainer}>

        {/* 模态框 */}
        <FancyAlert visible={visible} />
        <View style={styles.deleteContainer}>
          <Pressable android_ripple={{color: '#d9d9d9'}} onPress={() =>  setVisible(true)}>
            <MaterialIcons style={styles.icon} name='delete' size={40}/>
          </Pressable>
        </View>

    </View>
  )
}

export default ViewNote

Sous-composant :

const FancyAlert = ({visible}) => {
  const [showAlert, setShowAlert] = useState(false);

  return (
    <Modal transparent visible={visible}>
      <View style={styles.modalContainer}>
        <View style={styles.dialogContainer}>
          <Text style={[styles.text, {fontSize: 16}]}>您确定要删除此便签吗？</Text>

          <View style={styles.buttonContainer}>
            <Pressable style={styles.cancel} android_ripple={{color: '#d9d9d9'}} onPress={() => setVisible(false)}>
              <Text style={[styles.text, {fontFamily: 'SofiaProBold'}]}>取消</Text>
            </Pressable>
            
          </View>
        </View>
      </View>
    </Modal>
  )
}

export default FancyAlert

Answer 1

Déplacez l'état vers le composant parent et transmettez la fonction onClose.

const ViewNote = ({route, navigation}) => {
  const [visible, setVisible] = useState(false);

  function visibility(cases) {
    setVisible(cases);
    console.log(cases);
  }

  return (
    <View style={styles.noteContainer}>

        {/* MODAL */}
        <FancyAlert visible={visible} onClose={() => setVisible(false)} />
        <View style={styles.deleteContainer}>
          <Pressable android_ripple={{color: '#d9d9d9'}} onPress={() =>  setVisible(true)}>
            <MaterialIcons style={styles.icon} name='delete' size={40}/>
          </Pressable>
        </View>

    </View>
  )
}

export default ViewNote

const FancyAlert = ({visible, onClose}) => {
 
  return (
    <Modal transparent visible={visible} onClose={onClose}>
      <View style={styles.modalContainer}>
        <View style={styles.dialogContainer}>
          <Text style={[styles.text, {fontSize: 16}]}>Are you sure you want to delete this note?</Text>

          <View style={styles.buttonContainer}>
            <Pressable 
              style={styles.cancel} 
              android_ripple={{color: '#d9d9d9'}} 
              onPress={onClose}>
            <Text style={[styles.text, {fontFamily: 'SofiaProBold'}]}>Cancel</Text>
            </Pressable>
            
          </View>
        </View>
      </View>
    </Modal>
  )
}

export default FancyAlert

Answer 2

Il vous suffit de passer la fonction "visibilité" comme propriété de FancyAlert. Votre code devrait ressembler à ceci :

const ViewNote = ({route, navigation}) => {
  const [visible, setVisible] = useState(false);

  function visibility(cases) {
    setVisible(cases);
    console.log(cases);
  }

  return (
    <View style={styles.noteContainer}>

        {/* MODAL */}
        <FancyAlert visible={visible} visibility={visibility} />
        <View style={styles.deleteContainer}>
          <Pressable android_ripple={{color: '#d9d9d9'}} onPress={() =>  visibility(true)}>
            <MaterialIcons style={styles.icon} name='delete' size={40}/>
          </Pressable>
        </View>

    </View>
  )
}

export default ViewNote

Ensuite, le composant FancyAlert devrait être :

const FancyAlert = ({ visible, visibility }) => {
  const [showAlert, setShowAlert] = useState(false);

  return (
    <Modal transparent visible={visible}>
      <View style={styles.modalContainer}>
        <View style={styles.dialogContainer}>
          <Text style={[styles.text, {fontSize: 16}]}>你确定要删除这个笔记吗？</Text>

          <View style={styles.buttonContainer}>
            <Pressable style={styles.cancel} android_ripple={{color: '#d9d9d9'}} onPress={() => visibility(false)}>
              <Text style={[styles.text, {fontFamily: 'SofiaProBold'}]}>取消</Text>
            </Pressable>
            
          </View>
        </View>
      </View>
    </Modal>
  )
}

export default FancyAlert

C'est ça