从页面返回后点击两次才能打开<Modal/>的问题求助

当你点击Modal内的列表项跳转到其他页面时，Modal的显示状态modalVisible没有被重置为false。React Navigation的栈导航会把之前的页面组件保留在内存中，返回Home页时，组件的状态会沿用之前的值——此时modalVisible还是true，但Modal因为页面跳转已经被隐藏了。

第一次点击按钮执行toggleModal，会把modalVisible从true改成false，Modal自然不会显示；第二次点击才会把它改回true，Modal才会弹出，这就是必须点两次的原因。

方案1：跳转前主动关闭Modal #

修改列表项的点击事件，在跳转到目标页面之前，先把Modal的显示状态设为false：

const renderPopList = ({ item, index }) => {
  const lastItem = index === modalData.length - 1;
  return (
    <TouchableOpacity onPress={() => {
      // 先关闭Modal
      setModalVisible(false);
      // 再跳转页面
      navigation.navigate(item.navigateTo);
    }}>
      <Text style={[styles.links, lastItem && styles.lastLink]}>
        {item.key}
      </Text>
    </TouchableOpacity>
  );
};

方案2：监听页面焦点，自动重置状态 #

如果担心还有其他场景会导致状态异常，可以监听Home页面的焦点状态，当页面重新获得焦点时，强制关闭Modal：
首先导入useFocusEffect：

import { useFocusEffect } from '@react-navigation/native';

然后在组件内添加监听：

export default function Home() {
  const [modalVisible, setModalVisible] = useState(false);

  // 监听页面焦点
  useFocusEffect(
    React.useCallback(() => {
      // 页面获得焦点时，关闭Modal
      setModalVisible(false);
    }, [])
  );

  // 其他代码不变...
}

• 你的Modal组件上设置了onTouchStart={toggleModal}，这会导致点击Modal内的任何区域（包括FlatList）都会触发关闭，和你想要的点击遮罩层关闭冲突，建议移除这个属性。
• FlatList本身没有onPress属性，你设置的onPress={toggleModal}是无效的，可以直接删掉。

内容的提问来源于stack exchange，提问作者Reacting