[リアクション]-[デバイス-検出]を使用してページを移動

今回の配置Takeusでは、pcで画面を見ることをお勧めしますが、移動の観点から見ると、画面を壊すべきではないと思います.だから私がモバイルデバイスにアクセスしたとき、私はいっそあなたにモバイルの準備をしているページを見せることにしました.
reactがモバイルデバイスのアクセスを検出する方法を探していると、react-device-detectというライブラリが見つかり、モバイルアクセスを非常に簡単に検出できます.
https://www.npmjs.com/package/react-device-detect
このライブラリを使用して、「モバイルReady」画面を実装する方法を見てみましょう.

1.react-device-detectのインストール

yarn add react-device-detect

2.移動準備ビューのリフレッシュ

PMは「移動の準備中」画面だけではなく、後で共有して表示するためのボタンを追加することをお勧めします.🙂 (次回はKakaoTalkやFacebookを共有する機能も追加できます!)

import React from 'react';
import styled from 'styled-components';
import mobilePreparingImg from 'assets/img/img_mobile_preparing.png';

const MobilePage = () => {
  const handleLinkCopy = () => {
    navigator.clipboard.writeText(document.location.href);
    alert('링크가 복사되었습니다!');
  };

  return (
    <MobilePageWrapper>
      <img src={mobilePreparingImg} alt="mobile icon" />
      <p className="title">PC버전으로 접속해주세요</p>
      <p className="description">
        아쉽게도 모바일은 지원하지 않아요😥 <br />
        PC환경에서 테이커스를 이용해주세요!
      </p>
      <button className="link-copy-button" onClick={handleLinkCopy}>
        링크 복사하기
      </button>
    </MobilePageWrapper>
  );
};

/** styled components */

export default MobilePage;

3. App.モバイルビューロジックをjsxに追加

isMobile

を使用

import React from 'react';
import { isMobile } from 'react-device-detect';

import GlobalStyle from './styles/GlobalStyle';
import styled from 'styled-components';

import { Header, Footer } from './components/index';
import LoginProvider from './lib/context/provider';
import { MobilePage } from 'pages';


function App() {
  return (
    <>
      <GlobalStyle />
      {isMobile ? (
        <MobilePage />
      ) : (
        <Router>
          <LoginProvider>
            <Header />
          	/** content */
            <Footer />
          </LoginProvider>
        </Router>
      )}
    </>
  );
}

export default App;

1つ目の方法はismobileと3つの演算子を使用して条件レンダリングを行うことです.これは簡単な方法ですが、App.jsxの内容が複雑になると、コードが認識しにくくなる可能性があります.

MobileVuew、BrowserView

を使用

import React from 'react';
import { BrowserView, MobileView } from 'react-device-detect';

import GlobalStyle from './styles/GlobalStyle';
import styled from 'styled-components';

import { Header, Footer } from './components/index';
import LoginProvider from './lib/context/provider';
import { MobilePage } from 'pages';


function App() {
  return (
    <>
      <GlobalStyle />
      <MobileView>
        <MobilePage />
      </MobileView>
      <BrowserView>
        <Router>
          <LoginProvider>
            <Header />
            /** content */
            <Footer />
          </LoginProvider>
        </Router>
        </BrowserView>
    </>
  );
}

export default App;

2つ目の方法はBrowserViewとMobileViewを使うことです!App.jsxに多くのラベルがある場合、第2の方法はより簡潔で清潔に見えます.🙂

実行結果

react-device-detectを使用すると、chrome開発ツールのモバイル画面にアプリケーションが表示されます.
react-device-detectを使用して、非常に簡単なモバイルページを実現しました!このパッケージには、今日紹介されているisMobile、MobileView、BrowserViewのほかに、isIEなどの他の機能があります.
https://github.com/duskload/react-device-detect#readme