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

【问题标题】：How to close modal when navigating back to my screen?导航回我的屏幕时如何关闭模式？
【发布时间】：2021-11-02 14:01:06
【问题描述】：

所以我有一个呈现模态组件的主屏幕。我使用一些状态来实现模态可见性。但是，问题是当我从模式导航到另一个屏幕然后返回主屏幕时，模式仍然打开，我不知道如何关闭它。我尝试使用 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>
  );
};

【问题讨论】：

标签： reactjs react-native modal-dialog use-effect use-state

【解决方案1】：

修改这段代码

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

到

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

【讨论】：

所以你是对的，我在切换模式中没有使用 () 之前尝试过这种方法。非常感谢，我总是把简单的事情搞砸

【解决方案2】：

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

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

然后在模态中

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

【讨论】：