React Native Modal报错：Undefined is not a function 问题求助

以下是针对该问题的排查和解决步骤：

• 检查Modal组件的基础配置
  确保正确导入React Native官方Modal组件，避免和自定义Modal混淆：

  import { Modal } from 'react-native';
  

  同时确认Modal的必填props（比如iOS的onRequestClose）已传入有效函数，不要传undefined或非函数值。

• 排查导航切换时的Modal状态与生命周期
  HomePage作为HomeStack中的Modal类型页面，切换到其他栈时可能进入后台或触发卸载。此时若Modal的回调函数（如onShow、自定义关闭逻辑）引用了已卸载组件的函数/状态，就会触发报错。

  • 用useCallback包裹回调函数，确保依赖稳定：

    const handleModalClose = useCallback(() => {
      setModalVisible(false);
    }, []);
    

  • 在组件卸载时清理相关逻辑，避免内存泄漏或无效引用：

    useEffect(() => {
      return () => {
        // 清理异步操作或重置状态
        setModalVisible(false);
      };
    }, []);
    

• 确保导航跳转前Modal已正确关闭
  切换页面时先主动关闭Modal，避免后台的Modal组件尝试执行已失效的逻辑：

  const goToCategories = () => {
    setModalVisible(false);
    navigation.navigate('CategoriesStack');
  };
  

• 定位具体报错点
  打开React Native调试工具查看完整报错栈，找到modal.js之外的调用链路，确认是哪个函数调用时出现undefined。常见场景包括：将状态变量误当作函数调用、回调函数因依赖更新变成undefined。

• 简化场景测试
  暂时移除HomePage中Modal的自定义逻辑，保留最基础的Modal代码：

  function HomePage({ navigation }) {
    const [modalVisible, setModalVisible] = useState(false);
    return (
      <View>
        <Button title="Open Modal" onPress={() => setModalVisible(true)} />
        <Modal
          visible={modalVisible}
          onRequestClose={() => setModalVisible(false)}
        >
          <Button title="Close" onPress={() => setModalVisible(false)} />
        </Modal>
        <Button title="Go to Categories" onPress={goToCategories} />
      </View>
    );
  }
  

  若简化版本无报错，再逐步添加原有逻辑，定位到触发问题的代码块。

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