다른 사용자 정의 구성 요소에서 중첩된 모달을 닫는 방법은 무엇입니까?

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

Answer 1

상태를 상위 구성 요소로 이동하고 onClose 함수를 전달합니다.

으아악 으아악

Answer 2

FancyAlert의 속성으로 "가시성" 기능을 전달하기만 하면 됩니다. 코드는 다음과 같아야 합니다.

으아악

그러면 FancyAlert 구성 요소는 다음과 같아야 합니다.

으아악

바로 그거야