在我的React Native项目中,我遇到了与Modal组件有关的问题。尽管设置了用于关闭模态框的按钮,但它并没有按预期工作。以下是代码的简化版:
import React, { useState } from 'react';
import { View, Text, Modal, Button } from 'react-native';
export default function MyComponent() {
const [isModalVisible, setModalVisible] = useState(false);
const handleOpenModal = () => {
setModalVisible(true);
};
const handleCloseModal = () => {
setModalVisible(false);
console.log('Modal已关闭!');
};
return (
<View>
<Button title="打开模态框" onPress={handleOpenModal} />
<Modal visible={isModalVisible} animationType="slide">
<View>
<Text>模态框内容</Text>
<Button title="关闭模态框" onPress={handleCloseModal} />
</View>
</Modal>
</View>
);
}
尽管已经有了handleCloseModal
函数,但按下“关闭模态框”按钮并不能如愿关闭模态框。函数内部的控制台日志也没有显示。
请能否提供一些指导,关于如何排查和解决在React Native中遇到的这个新问题——按钮按下后Modal无法正常关闭?任何见解或建议都将不胜感激。谢谢!