为什么我要点击两次才能打开 <Modal /> 当我从一个页面返回时?

huangapple go评论99阅读模式
英文:

Why do I have to click two times to open the <Modal /> when I return from a page?

问题

我创建了一个按钮类型,用于在主页上打开模态框,模态框在单击叠加层时可以正常打开和关闭,问题是当我在包含列表的页面使用&lt;Modal /&gt;组件,并且在返回主页后,如果我单击该按钮以打开<Modal />,则第一次单击时它不会打开。我必须点击两次才能打开它。这里问题是什么?我无法理解。

这是我的代码:

英文:

I made a button type to open the modal on the Home page, the modal is coming fine and closing fine when click on the overlay, the problem is when I got some page with the list inside&lt;Modal /&gt; component and when I come back to the Home page and then if I click on that button to open the <Modal /> it doesn't open on first click yet. I have to click two times to open it. What is the issue here? I can't understand.

Here is my code:

  1. //Home.js
  2. const modalData = [
  3. { key: &quot;Add Dealer&quot;, navigateTo: &quot;AddDealer&quot; },
  4. { key: &quot;Add Franchise&quot;, navigateTo: &quot;AddFranchise&quot; },
  5. { key: &quot;New Lead&quot;, navigateTo: &quot;AddNewLeads&quot; },
  6. ];
  7. export default function Home() {
  8. const [modalVisible, setModalVisible] = useState(false);
  9. const renderPopList = ({ item, index }) =&gt; {
  10. const lastItem = index === modalData.length - 1;
  11. return (
  12. &lt;TouchableOpacity onPress={() =&gt; navigation.navigate(item.navigateTo)}&gt;
  13. &lt;Text style={[styles.links, lastItem &amp;&amp; styles.lastLink]}&gt;
  14. {item.key}
  15. &lt;/Text&gt;
  16. &lt;/TouchableOpacity&gt;
  17. );
  18. };
  19. const toggleModal = () =&gt; {
  20. setModalVisible(!modalVisible);
  21. };
  22. return (
  23. &lt;&gt;
  24. &lt;Modal
  25. animationType=&quot;slide&quot;
  26. transparent={true}
  27. visible={modalVisible}
  28. onRequestClose={toggleModal}
  29. onTouchStart={toggleModal}
  30. style={styles.modalWrapper}
  31. &gt;
  32. &lt;TouchableWithoutFeedback onPress={toggleModal}&gt;
  33. &lt;View
  34. style={{ flex: 1, backgroundColor: &quot;rgba(0,0,0,0.1)&quot; }}
  35. onPress={toggleModal}
  36. &gt;&lt;/View&gt;
  37. &lt;/TouchableWithoutFeedback&gt;
  38. &lt;FlatList
  39. data={modalData}
  40. renderItem={renderPopList}
  41. onPress={toggleModal}
  42. style={[styles.modal]}
  43. /&gt;
  44. &lt;/Modal&gt;
  45. //Button Here
  46. &lt;View style={styles.bottomBtnWrap}&gt;
  47. &lt;TouchableOpacity style={styles.addBtn} onPress={toggleModal}&gt;
  48. &lt;FontAwesome color=&quot;#fff&quot; name=&quot;plus&quot; size={30} /&gt;
  49. &lt;/TouchableOpacity&gt;
  50. &lt;/View&gt;
  51. &lt;/&gt;
  52. );
  53. }

答案1

得分: 0

你可以使用这段代码进行操作:

  1. //Home.js
  2. const modalData = [
  3. { key: "添加经销商", navigateTo: "AddDealer" },
  4. { key: "添加特许经营", navigateTo: "AddFranchise" },
  5. { key: "新线索", navigateTo: "AddNewLeads" },
  6. ];
  7. export default function Home({ navigation }) {
  8. const [modalVisible, setModalVisible] = useState(false);
  9. useEffect(() => {
  10. const unsubscribe = navigation.addListener("blur", () => {
  11. setModalVisible(false);
  12. });
  13. return unsubscribe;
  14. }, [navigation]);
  15. const renderPopList = ({ item, index }) => {
  16. const lastItem = index === modalData.length - 1;
  17. return (
  18. <TouchableOpacity onPress={() => navigation.navigate(item.navigateTo)}>
  19. <Text style={[styles.links, lastItem && styles.lastLink]}>
  20. {item.key}
  21. </Text>
  22. </TouchableOpacity>
  23. );
  24. };
  25. const toggleModal = () => {
  26. setModalVisible(!modalVisible);
  27. };
  28. return (
  29. <Modal
  30. animationType="slide"
  31. transparent={true}
  32. visible={modalVisible}
  33. onRequestClose={toggleModal}
  34. onTouchStart={toggleModal}
  35. style={styles.modalWrapper}
  36. >
  37. <TouchableWithoutFeedback onPress={toggleModal}>
  38. <View
  39. style={{ flex: 1, backgroundColor: "rgba(0,0,0,0.1)" }}
  40. onPress={toggleModal}
  41. ></View>
  42. </TouchableWithoutFeedback>
  43. <FlatList
  44. data={modalData}
  45. renderItem={renderPopList}
  46. onPress={toggleModal}
  47. style={[styles.modal]}
  48. />
  49. </Modal>
  50. //按钮位置
  51. <View style={styles.bottomBtnWrap}>
  52. <TouchableOpacity style={styles.addBtn} onPress={toggleModal}>
  53. <FontAwesome color="#fff" name="plus" size={30} />
  54. </TouchableOpacity>
  55. </View>
  56. );
  57. }
英文:

you can use this code for it

  1. //Home.js
  2. const modalData = [
  3. { key: &quot;Add Dealer&quot;, navigateTo: &quot;AddDealer&quot; },
  4. { key: &quot;Add Franchise&quot;, navigateTo: &quot;AddFranchise&quot; },
  5. { key: &quot;New Lead&quot;, navigateTo: &quot;AddNewLeads&quot; },
  6. ];
  7. export default function Home({ navigation }) {
  8. const [modalVisible, setModalVisible] = useState(false);
  9. useEffect(() =&gt; {
  10. const unsubscribe = navigation.addListener(&quot;blur&quot;, () =&gt; {
  11. setModalVisible(false);
  12. });
  13. return unsubscribe;
  14. }, [navigation]);
  15. const renderPopList = ({ item, index }) =&gt; {
  16. const lastItem = index === modalData.length - 1;
  17. return (
  18. &lt;TouchableOpacity onPress={() =&gt; navigation.navigate(item.navigateTo)}&gt;
  19. &lt;Text style={[styles.links, lastItem &amp;&amp; styles.lastLink]}&gt;
  20. {item.key}
  21. &lt;/Text&gt;
  22. &lt;/TouchableOpacity&gt;
  23. );
  24. };
  25. const toggleModal = () =&gt; {
  26. setModalVisible(!modalVisible);
  27. };
  28. return (
  29. &lt;Modal
  30. animationType=&quot;slide&quot;
  31. transparent={true}
  32. visible={modalVisible}
  33. onRequestClose={toggleModal}
  34. onTouchStart={toggleModal}
  35. style={styles.modalWrapper}
  36. &gt;
  37. &lt;TouchableWithoutFeedback onPress={toggleModal}&gt;
  38. &lt;View
  39. style={{ flex: 1, backgroundColor: &quot;rgba(0,0,0,0.1)&quot; }}
  40. onPress={toggleModal}
  41. &gt;&lt;/View&gt;
  42. &lt;/TouchableWithoutFeedback&gt;
  43. &lt;FlatList
  44. data={modalData}
  45. renderItem={renderPopList}
  46. onPress={toggleModal}
  47. style={[styles.modal]}
  48. /&gt;
  49. &lt;/Modal&gt;
  50. //Button Here
  51. &lt;View style={styles.bottomBtnWrap}&gt;
  52. &lt;TouchableOpacity style={styles.addBtn} onPress={toggleModal}&gt;
  53. &lt;FontAwesome color=&quot;#fff&quot; name=&quot;plus&quot; size={30} /&gt;
  54. &lt;/TouchableOpacity&gt;
  55. &lt;/View&gt;
  56. );
  57. }
  58. </details>

huangapple
  • 本文由 发表于 2023年4月11日 15:14:09
  • 转载请务必保留本文链接:https://go.coder-hub.com/75983307.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定