React Bootstrap 全屏道具不起作用

Question

描述错误

向 Modal 添加全屏属性并不会使 Modal 变成全屏。

可重现的示例

使用 CodeSandbox 的最小示例。

预期行为

模式为全屏。

截图

这是代码沙盒上的示例。它也不适用于我的应用程序。在我的应用程序中，我使用最新版本的react-bootstrap包。代码沙盒示例使用的是 1.5.2。

环境

• 操作系统：macOS M1
• 浏览器，版本：Chrome v94
• 代码沙盒上的 React-Bootstrap 版本：1.5.2。 1.6.3 在我的应用程序中。

其他背景

我很困惑，因为全屏道具似乎在文档的示例中起作用。您可以在 Chrome here 中运行手机模拟器并查看其工作情况。 我没有看到我的应用程序中的代码和文档中的代码有任何重要区别。我错过了什么吗？做错事了吗？ 最后，我试图只影响我的应用程序中的一个特定模式，并且我只希望当屏幕尺寸较小时该模式进入全屏。 非常感谢任何帮助！

Answer 1

答案是 Bootstrap Modal 上的全屏属性仅与 React-Bootstrap 版本 5 兼容。有人好心地帮助我解决了这个 GitHub 问题。

要升级到 Bootstrap 5，请在终端中运行以下命令：

1. npm uninstall bootstrap

2. npm uninstall react-bootstrap

3. npm install react-bootstrap@next [email protected]

4. 将以下代码片段放入公共文件夹中的 index.html 文件中

<link
 rel="stylesheet"
 href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
 integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
 crossorigin="anonymous"
/>

如果您尚未安装 Bootstrap，则不需要前两个命令。

注意：如果您的应用程序正在使用 Bootstrap 4，则可能不值得仅仅为了这个道具而升级到 Bootstrap 5。至少有几个 Bootstrap 4 React 组件与 Bootstrap 5 不兼容（即 Form.File、Accordion.Toggle 和 InputGroup.Prepend）。

Answer 2

您必须除去容器的填充物

Answer 3

将此样式添加到您的模态对话框中：

style="max-width: 100% !important; max-height: 100% !important;"

Answer 4

我有另一个答案。

所以你可能很熟悉这个

<Modal
  show={show}
  fullScreen
  backdrop="static"
>
  <Modal.Header>Header</Modal.Header>
  <Modal.Body>Body</Modal.Body>
  <Modal.Footer>Footer</Modal.Footer>
</Modal>

你可能意识到这就是你想要的

<Modal
  show={show}
  fullScreen
  backdrop="static"
  style={{ ...some styles }}
>
  <Modal.Header>Header</Modal.Header>
  <Modal.Body>Body</Modal.Body>
  <Modal.Footer>Footer</Modal.Footer>
</Modal>

也许添加一些最大宽度= 100vw或其他东西，你会因为它有点工作而感到沮丧，但你需要逻辑，而你真的不想编写样式表，而只是使用逻辑将类应用到模态容器并定位你的目标真的想要。

永远不要害怕。 反应在这里

试试这个

  const modalRef = useRef(null);

  useEffect(() => {
    if (modalRef.current) {
      const modalElement = modalRef.current['dialog']['childNodes'][0];
      console.log(modalElement);
      if (modalElement) {
        (modalElement as HTMLElement).classList.add('modal-fullscreen');
      }
    }
  }, []);

  return (
    <Modal show={show} fullScreen backdrop="static" ref={modalRef}>
      <Modal.Header>Header</Modal.Header>
      <Modal.Body>Body</Modal.Body>
      <Modal.Footer>Footer</Modal.Footer>
    </Modal>
  );

我的示例是用 TypeScript 编写的，但我认为 JS 没有理由不能接受 as HTMLElement 类型转换。