접이식 디스플레이(Surface Duo 및 React)

지난달 마이크로소프트는 오랫동안 기대했던 Surface Duo, 접을 수 있는 듀얼 스크린 모바일 기기를 발표했다.
아직은 아니지만.호주에서는 특히 인터넷 개발자를 위해 하는 일 때문에 내가 그것에 흥미를 느끼는 것을 막지 못했다.당신은 전체 블로그 글 here을 읽을 수 있지만 관건은 다음과 같다.

CSS 원어, 레이아웃 오버플로우 감지 모드

화면 및 힌지 크기의 CSS 변수

창 세그먼트의 JavaScript API 가져오기

기본적으로 브라우저는 두 디스플레이를 하나의 뷰포트로 간주하며 뷰포트를 사용하는 방법, 특히 뷰포트 사이의 간격을 관리하는 방법을 관리합니다(브라우저는 알 수 없음).이러한 지식을 통해 저는 React를 사용하여Surface Duo를 웹 응용 프로그램에 대한 응답성 디자인과 점진적인 강화를 어떻게 하는지 보기로 결정했습니다.

환경을 조성하다
위에서 말한 바와 같이 이 조합은 미국 외에는 사용할 수 없다. (본문을 작성할 때) 그래서 우리는 어떻게 해야만 그것과 함께 운행하기 시작할 수 있습니까?물론 브라우저 개발 도구를 사용하세요!Here’s a blog about it all은 Chrome이나 Edge의 다른 모바일 장치 에뮬레이션과 동일한 방식으로 작동하며 * 만 사용할 수 있으므로 애플리케이션을 구축할 수 있습니다.
*참고: 이것은 브라우저에서 여전히 실험적이므로 Edge 또는 Chrome Canary를 실행하고 edge://flags에서 활성화해야 합니다.here에 대한 자세한 내용을 참조하십시오.

원산지 시험
더 광범위한 사용자 그룹에 배치하고 싶지만, 모든 사용자가 브라우저를 직접 설정하고 싶지 않다면, Origin Trial을 설정하면, 사용자가 실험 기능을 사용할 수 있는 시간대를 만들 수 있습니다.this article을 보고 어떻게 시작하는지 알고 프레젠테이션 프로그램에 추가했습니다.

축소 가능 소개
JavaScript UI 라이브러리에 대해 말하자면 React는 내가 가장 좋아하는 곳이다. 그래서 나는 어떻게 React를 사용하여 응용 프로그램을 점차적으로 강화할 수 있는지 고려하고 싶다. 그래서 나는 react-foldable을 만들었다.react-foldable은 일련의 React 구성 요소와 연결고리로 상술한 건의 기준을 사용하면 접을 수 있는 장치를 더욱 쉽게 사용할 수 있다.

축소 가능 배치 생성하기
나의 첫 번째 목표는 서로 다른 디스플레이 내용에 대해 어떻게 연구하고 변화에 반응하는지를 연구하는 것이다. 이것은 우리가 단일 디스플레이 모델에 있고'전개'가 이중 디스플레이라면 더 많은 내용을 도입하고 싶다는 것을 의미한다.
우선 응용 프로그램에 접을 수 있는 영역을 만들 것입니다.기본적으로 우리는 설비의 접힘성 변화를 관찰하고 그에 상응하는 반응을 할 것이다.

import React from "react";
import { Foldable } from "react-foldable";

const App = () => <Foldable>{/* TODO: Components */}</Foldable>;

<Foldable> 구성 요소 중, 우리는 <FoldableScreen>을 지정했는데, 이것은 구성 요소 트리에서 추가/삭제된 것이다.

import React from "react";
import "./App.css";
import { Foldable, FoldableScreen } from "react-foldable";
import { MainApp } from "./MainApp";
import { SecondScreen } from "./SecondScreen";

function App() {
    return (
        <Foldable>
            <FoldableScreen matchScreen={0} component={MainApp} />
            <FoldableScreen matchScreen={1} component={SecondScreen} />
        </Foldable>
    );
}

export default App;

모든 <FoldableScreen>은 어느 화면과 일치해야 하는지 알려야 한다.접을 수 없는 장치는 항상 0 화면이 있을 것이다. 그러면 당신이 표시하고 싶었던 것을 거기에 놓을 수 있다.화면과 일치하는 구성 요소의 수량도 제한이 없습니다. 왜냐하면 <FoldableScreen>은 포장기 구성 요소처럼 표시될지 여부를 확인하기 때문입니다.

고급 일치
화면에서 일치하는 것은 많은 흔한 장면에 좋은 일이지만, 만약 장치가 더블 스크린을 지원하거나 지원하지 않는다면 어떻게 해야 합니까?이를 위해 다음과 같이 match 도구를 사용합니다.

<Foldable>
    <FoldableScreen
        match={({ isDualScreen }) => isDualScreen}
        component={() => <p>I'm only appearing when we can dual-screen</p>}
    />
</Foldable>

match 아이템은 서명이 (props: FoldableContextProps) => boolean인 함수를 사용하는데 그 중에서 FoldableContextProps의 정의는 다음과 같다.

interface FoldableContextProps {
    windowSegments?: DOMRect[];
    isDualScreen: boolean;
    screenSpanning: ScreenSpanning;
}

이 기능을 사용하면 구성 요소가 이중 화면 모드에 있으면 완전히 삭제할 수 있으며, 구성 요소 차원 구조의 큰 블록의 내용을 교환할 수 있습니다.

갈고리를 쓰다
교환 구성 요소는 많은 상황에서 작업을 할 수 있지만, 때때로 접을 수 있는 정보를 프로그래밍을 통해 검사해야 합니다. 이 과정을 간소화하기 위해 일련의 연결이 있습니다.사실 갈고리 값도 FoldableContextProps의 match 유형을 통해 공개되기 때문에 구성 요소dogfoods 자체!

useDualScreen - 디바이스가 듀얼 스크린 모드인지 여부를 나타내는 부울 값

useScreenSpanning - 화면이 가로, 세로 또는 알 수 없음(주로 축소 가능 장치가 아닌 경우)

useWindowSegments - DOMRect 배열을 반환합니다. 이 배열은 각 화면의 경계 크기를 나타냅니다. (접지 않은 장치는 배열을 반환합니다)

useFoldableContext - 모든 값을 포함하는 React 컨텍스트

에 쉽게 액세스

결론
이것은 react-foldable에 대한 빠른 소개입니다. 저는 라이브러리를 구축해 왔습니다. 리액션을 사용하여 접을 수 있는 장치를 만들기 위해 점차적으로 강화된 응용 프로그램을 쉽게 만들 수 있기를 바랍니다.
이 구성 요소에 대한 프레젠테이션은 https://react-foldable.aaron-powell.com/에서 확인할 수 있습니다.
저는 구성 요소의 작업 원리와 전체적인 디자인에 대한 피드백을 기꺼이 받아들입니다. 왜냐하면 지금은 이 문제를 해결하고 싶지만 증명해야 할 부분이 있으면 저희에게 연락 주십시오.