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

Posted 2023-03-17

【中文标题】导航回我的屏幕时如何关闭模式？

【英文标题】：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>
  );
;

【参考方案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>