@aaronpowell/react-foldable 中文文档教程
React-Foldable
React-Foldable 是一组组件和 React 钩子，可以更轻松地使用可折叠显示器，例如 Surface Duo。
Usage
有两个核心组件，Foldable 和 FoldableScreen。
<Foldable>
<Foldable>...</Foldable>
该组件旨在包含整个应用程序，或需要折叠感知的整个应用程序。 它包含连接所有媒体查询和 JavaScript API 的逻辑，然后通过 React 上下文公开该信息。
<FoldableScreen>
<Foldable>
<FoldableScreen matchScreen={0} component={FirstScreen} />
<FoldableScreen matchScreen={1} component={SecondScreen} />
</Foldable>
此组件将根据 matchScreen 编号是否与可见屏幕匹配来确定是否显示提供的 component。
Hooks
有四个挂钩可用。 注意：除了上下文挂钩之外，您无需在
useDualScreen
这将返回一个布尔值，指示显示器是否处于双屏模式。
useScreenSpanning
这将返回当前显示的跨度模式，使用 TypeScript 枚举 ScreenSpanning：
enum ScreenSpanning {
Vertical = "single-fold-vertical",
Horizontal = "single-fold-horizontal",
Unknown = "unknown",
}
如果设备不可折叠或不处于可折叠模式，则使用 unknown 的值。
useWindowSegments
这将返回一个包含可见屏幕尺寸的 DOMRect 数组。 在不可折叠设备中，它将有一个元素，在可折叠/多屏设备中，它将为每个屏幕返回一个项目，从左上角开始计数。
useFoldableContext
如果您更喜欢通过上下文而不是直接通过挂钩访问它，这提供了对公开每个挂钩信息的 React 上下文的访问。
License
React-Foldable
React-Foldable is a set of components and React hooks that make it easier to work with foldable displays, such as the Surface Duo.
Usage
There are two core components, Foldable and FoldableScreen.
<Foldable>
<Foldable>...</Foldable>
This component is intended to enclose a whole application, or the whole of the application that needs to be foldable-aware. It contains the logic to connect with all the media queries and JavaScript APIs then expose that information via a React context.
<FoldableScreen>
<Foldable>
<FoldableScreen matchScreen={0} component={FirstScreen} />
<FoldableScreen matchScreen={1} component={SecondScreen} />
</Foldable>
This component will determine whether or not to show the component provided, depending on whether the matchScreen number matches a visible screen.
Hooks
There are four hooks available. Note: with the exception of the context hook, you don't need to be within a <Foldable> component to use these hooks.
useDualScreen
This returns a boolean value that indicates whether the display is in dual-screen mode or not.
useScreenSpanning
This returns the span mode for the current display, using the TypeScript enum ScreenSpanning:
enum ScreenSpanning {
Vertical = "single-fold-vertical",
Horizontal = "single-fold-horizontal",
Unknown = "unknown",
}
The value of unknown is used if the device is not a foldable, or not in foldable mode.
useWindowSegments
This returns an array of DOMRect that contains the dimensions of the visible screens. In a non-foldable device, it will have one element, in a foldable/multi-screen device, it will return an item for each screen, counting from top-left.
useFoldableContext
This provides access to the React context that exposes the information from each of the hooks, should you prefer to access it via context rather than the hooks directly.
