导航回我的屏幕时如何关闭模式？

Question

所以我有一个呈现模态组件的主屏幕。我使用一些状态来获得模态可见性。但是，问题是当我从模式导航到另一个屏幕然后返回主屏幕时，模式仍然打开，我不知道如何关闭它。我尝试使用 useEffect 但它什么也没做。有什么建议吗？

这是主屏幕。 AddButton组件是一个简单的TouchableOpacity，onPress调用toggleModal函数

const [isModalVisible, setIsModalVisible] = useState(false);

 const toggleModal = () => {
      setIsModalVisible(!isModalVisible);
  };

useEffect(() => {
    setIsModalVisible(false)
  }, [navigation])

return (
    <AddButton
      title="ADD BOOK"
      toggleModal={toggleModal}
    />
)

模态组件是这样的：

const ModalComponent = ({navigation, isModalVisible, toggleModal, title, author, save, onNavigate }) => {
  
  return (
    <Modal isVisible={isModalVisible}>
      <View style={styles.container}>
        <Text>Modal</Text>

        <View style={styles.footer}>
          <TouchableOpacity onPress={toggleModal}>
            <Text>Cancel</Text>
          </TouchableOpacity>

          <TouchableOpacity onPress={() => navigation.navigate("AddBookScreen")}>
            <Text>{save}</Text>
          </TouchableOpacity>
        </View>
        
      </View>
    </Modal>
  );
};

Answer 1

修改此代码

 <TouchableOpacity onPress={() => navigation.navigate("AddBookScreen")}>
            <Text>{save}</Text>
          </TouchableOpacity>

至

<TouchableOpacity onPress={() => {
    navigation.navigate("AddBookScreen")
    toggleModal();
  }}>
            <Text>{save}</Text>
          </TouchableOpacity>

Answer 2

提取 onPress 函数并将其向上移动到您的页面，并将其作为 onSaveClick 回调传递给模态组件。

// on your page
const onSaveClick = () => {
  navigation.navigate("AddBookScreen")
  setIsModalVisible(false)
}

然后在模态

<TouchableOpacity onPress={onSaveClick}>
  <Text>{save}</Text>
</TouchableOpacity>

导航回我的屏幕时如何关闭模式？

How to close modal when navigating back to my screen?

modal-dialog

reactjs

react-native

use-effect

use-state