React Native跨组件通过visible属性打开react-native-modal失败问题

核心问题 #

你把Modal组件嵌套在了Button组件内部，React Native的Button组件不支持通过嵌套子组件渲染额外内容，导致Modal未被正确挂载，自然无法触发显示。

修正后的代码 #

Modal组件（补充关闭逻辑） #

type ModalProps = {
  visible: boolean;
  onClose: () => void;
};

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

调用组件（调整层级结构） #

const [isModalVisible, setModalVisible] = React.useState(false);

const handleModalClose = () => {
  setModalVisible(false);
};

const handleModalOpen = () => {
  setModalVisible(true);
};

return (
  <>
    <Button title="Modal one" onPress={handleModalOpen} />
    <Modal visible={isModalVisible} onClose={handleModalClose} />
  </>
);

关键调整说明 #

• 将Modal与Button放在同一层级，脱离嵌套关系，确保Modal能被正常渲染到页面中。
• 给Modal组件新增onClose属性，绑定关闭逻辑，点击弹窗内的Pressable元素即可关闭弹窗。

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