使用可见道具从不同组件反应本机模态开放模态

Question

如何使用我的可见道具从不同的组件文件打开Modal，该道具在isVisible内部传递，带有一些状态和按钮。现在模态没有打开。我正在使用react本机模态(https://github.com/react-native-modal/react-native-modal)

type ModalProps = {
visible: boolean;
};
export function Modal({ visible }: ModalProps) {
return (
<ReactNativeModal isVisible={visible} >
<Pressable>
<Icon size={14} name="icon1" />
</Pressable>
</ReactNativeModal>
);
}

调用不同文件中的组件

const [isModalVisible, setModalVisible] = React.useState(false);
function handleModalClose() {
setModalVisible(false);
}
function handleModalOpen() {
setModalVisible(true);
}
<Button title="Modal one" onPress={handleModalOpen}>
<Modal visible={isModalVisible}></Modal>
</Button>

Answer 1

您应该将isModalVisible作为visible道具传递给Modal组件：

<Modal visible={isModalVisible}></Modal>

如果需要从Modal组件关闭模态，还可以传递setModalVisible函数：

type ModalProps = {
visible: boolean;
setModalVisible: React.Dispatch<React.SetStateAction<boolean>>;
};
export function Modal({ visible, setModalVisible }: ModalProps) {
const handleClose = () => {
setModalVisible(false);
}
...