reactjs - 在 Gatsby 中根据屏幕尺寸切换布局

Question

我正在使用 Gatsby 构建一个网络应用程序，它需要在移动浏览器中加载使用移动 ui 库构建的单独布局，并在桌面浏览器中打开时加载另一个 ui 库的不同布局。

我应该如何在根(应用)组件级别实现这一点？

谢谢

Answer 1

我认为您可以尝试使用 wrapPageElement in gatsby-browser.js and gatsby-ssr.js , 根据浏览器高度返回不同的布局:

const React = require("react")
const Layout = ...
const MobileLayout = ...

exports.wrapPageElement = ({ element, props }) => {

   // a made up hook to detect browser size, implement your own
   const isMobile = useDetectMobile()

  return (
    isMobile 
      ? <MobileLayout {...props}>{element}</MobileLayout> 
      : <Layout {...props}>{element}</Layout>

  )
}

但这会变得很棘手，因为在服务器端生成期间您需要一个默认布局，这可能(或可能不会？)导致错误行为？我不确定。

一个安全的选择是为您的应用程序生成一个移动版本和一个桌面版本，然后在 gatsby-browser 中检测浏览器大小/类型并相应地重定向。