तो मेरे पास एक होमस्क्रीन है जो एक मोडल घटक प्रस्तुत करती है। मैं मोडल दृश्यता के लिए कुछ राज्यों का उपयोग करता हूं। हालांकि, समस्या यह है कि जब मैं मोडल से दूसरी स्क्रीन पर नेविगेट करता हूं और फिर अपनी होम स्क्रीन पर वापस जाता हूं, तब भी मोडल खुला रहता है और मैं यह नहीं समझ सकता कि इसे कैसे बंद किया जाए। मैंने useEffect का उपयोग करने की कोशिश की लेकिन यह कुछ भी नहीं करता है। कोई सुझाव?

यह होम स्क्रीन है। AddButton घटक एक साधारण TouchableOpacity है जिसे onPress टॉगलModal फ़ंक्शन को कॉल करता है

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>
  );
};
0
Emil Botezatu 4 सितंबर 2021, 22:11

2 जवाब

सबसे बढ़िया उत्तर

इस कोड को संशोधित करें

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

प्रति

<TouchableOpacity onPress={() => {
    navigation.navigate("AddBookScreen")
    toggleModal();
  }}>
            <Text>{save}</Text>
          </TouchableOpacity>
0
Dalvik 4 सितंबर 2021, 19:55

ऑनप्रेस फ़ंक्शन निकालें और इसे अपने पृष्ठ पर ले जाएं और इसे मोडल घटक पर ऑनसेवक्लिक कॉलबैक के रूप में पास करें।

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

फिर मोडल में

<TouchableOpacity onPress={onSaveClick}>
  <Text>{save}</Text>
</TouchableOpacity>
0
Rami M Theeb 4 सितंबर 2021, 20:06