如何在另一個自訂元件中關閉嵌套的模態框？

Question

如何關閉嵌套在另一個自訂元件中的模態框？ 我的模態框在另一個組件。我遇到了將狀態傳遞給父元件的問題。您可以在下面看到父元件和子元件。

父元件：

#

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

子元件：

#

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

將狀態移到父元件，並傳遞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

你只要將「visibility」函數傳遞為FancyAlert的屬性。 你的程式碼應該要像這樣：

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

然後，FancyAlert組件應該是：

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

這樣就可以了