时间戳

首页 > 解决方案 > 导航回我的屏幕时如何关闭模式？

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

问题描述

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

标签： reactjsreact-nativemodal-dialoguse-effectuse-state

解决方案

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

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

然后在模态

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

推荐阅读