92日目

[react]reactを使用して下部ナビゲーションを作成する
完了した下部ナビゲーション

プロセス
1.5つのボタンを作成する
BottomNavに下部ナビゲーション要素を配置します.jsxという名前のファイルを作成し、次のように印刷します.

import React from "react";

const BottomNav = () => {
  return (
    <nav className="wrapper">{/* 하단 네비게이션 최상위 태그 */
      <div>button1</div> {/* 네비게이션을 구성하고 있는 하나의 버튼 */}
      <div>button2</div>
      <div>button3</div>
      <div>button4</div>
      <div>button5</div>
    </nav>
  );
};

export default BottomNav;

位に示すように5 button字が出現した.

2.CSS水平位置合わせを適用する

BottomNav.cssをjsxのBottomNavに適用した.cssファイルを生成し、以下のように印刷します.

/* nav태그 아래의 자식들을 수평정렬하기 위한 설정 */
nav {
  overflow: hidden;
}
/* nav태그 아래의 div태그들을 수평정렬 및 세로길이 설정 */
nav > div {
  /* 수평정렬, 5개의 button을 각각 20% width만큼 할당 */
  text-align: center;
  float: left;
  width: 20%;

  /* 세로길이 설정 */
  height: 45px;
  line-height: 45px;
}

ナビゲーションの形態が形成されている.

3.ナビゲーションアイコンの適用
現在のボタンで出力されたテキストをアイコンで置き換えます.

https://fontawesome.com/v6.0/icons

の上のサイトで提供されているアイコンを使用しました.reactで使用できるからです.

使用方法
https://fontawesome.com/v6.0/docs/web/use-with/react/
上のサイトにログインします.

設定中の小包を追加します.

パッケージのインストールが完了すると、FontAwesomeは使用するアイコンを管理します.jsxファイルの作成

// 라이브러리
import { library } from "@fortawesome/fontawesome-svg-core";
// 사용할 아이콘 import
import { faPlus } from "@fortawesome/free-solid-svg-icons";
import { faUser } from "@fortawesome/free-solid-svg-icons";
import { faMedal } from "@fortawesome/free-solid-svg-icons";
import { faCompass } from "@fortawesome/free-solid-svg-icons";
import { faHome } from "@fortawesome/free-solid-svg-icons";

// 사용할 아이콘을 라이브러리에 추가
library.add(faPlus, faUser, faMedal, faCompass, faHome);

font awesome使用するアイコンをライブラリに入れます.上記のすべての使用するアイコンをライブラリに入れると、これらのアイコンを使用する構成部品からロードできます.

BottomNav.jsx

import React from "react";
import "./BottomNav.css";
// 사용할 아이콘 import
import "./FontAwesome";
// FontAwesomIcon 컴포넌트를 사용하기 위해 import
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
const BottomNav = () => {
  return (
    <nav className="wrapper">
      {/* 하단 네비게이션 최상위 태그 */}
      <div>
        <FontAwesomeIcon icon="home" /> {/* 네비게이션을 구성하고 있는 하나의 버튼 */}
      </div>
      <div>
        <FontAwesomeIcon icon="compass" />
      </div>
      <div>
        <FontAwesomeIcon icon="plus" />
      </div>
      <div>
        <FontAwesomeIcon icon="medal" />
      </div>
      <div>
        <FontAwesomeIcon icon="user" />
      </div>
    </nav>
  );
};


export default BottomNav;

FontAwesome iconをインポートし、buttonをアイコンに変換します.

ナビゲーションバーにアイコンが表示されます.
4.ナビゲーションバーの下部に移動

/* 네비바 하단 고정 밑 세로 길이 설정 */
.wrapper {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 45px;
}

/* nav태그 아래의 자식들을 수평정렬하기 위한 설정 */
nav {
  overflow: hidden;
  border-top: 2px solid grey;
}
/* nav태그 아래의 div태그들을 수평정렬 및 세로길이 설정 */
nav > div {
  /* 수평정렬, 5개의 button을 각각 20% width만큼 할당 */
  float: left;
  width: 20%;
  text-align: center;

  /* 세로길이 설정 */
  height: 45px;
  line-height: 45px;
}

一番上のパッケージクラスを下に移動し、position:fixedオプションを使用して画面に固定します.

5.選択したアイコンの色を変更する
アイコンの色は変わりません.ユーザーは今どのページも見えません.アイコンを押して、色を変えます.
BottomNav.jsx

import React, { useState } from "react";
import "./BottomNav.css";
import { Link } from "react-router-dom";
// 사용할 아이콘 import
import "./FontAwesome";
// FontAwesomIcon 컴포넌트를 사용하기 위해 import
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
const BottomNav = () => {
  // 현재 선택된 아이콘을 관리하는 state
  const [activeNav, setActiveNav] = useState(1);
  return (
    <nav className="wrapper">
      {/* 하단 네비게이션 최상위 태그 */}
      <div>
        <Link to="/first" className="nav-link" onClick={() => setActiveNav(1)}>
          <FontAwesomeIcon
            icon="home"
            className={activeNav === 1 ? "nav-item active" : "nav-item"}
          />
          {/* 네비게이션을 구성하고 있는 하나의 버튼 */}
        </Link>
      </div>
      <div>
        <Link to="/second" className="nav-link" onClick={() => setActiveNav(2)}>
          <FontAwesomeIcon
            icon="compass"
            className={activeNav === 2 ? "nav-item active" : "nav-item"}
          />
        </Link>
      </div>
      <div>
        <Link to="/third" className="nav-link" onClick={() => setActiveNav(3)}>
          <FontAwesomeIcon
            icon="plus"
            className={activeNav === 3 ? "nav-item active" : "nav-item"}
          />
        </Link>
      </div>
      <div>
        <Link to="/fourth" className="nav-link" onClick={() => setActiveNav(4)}>
          <FontAwesomeIcon
            icon="medal"
            className={activeNav === 4 ? "nav-item active" : "nav-item"}
          />
        </Link>
      </div>
      <div>
        <Link to="/fifth" className="nav-link" onClick={() => setActiveNav(5)}>
          <FontAwesomeIcon
            icon="user"
            className={activeNav === 5 ? "nav-item active" : "nav-item"}
          />
        </Link>
      </div>
    </nav>
  );
};

export default BottomNav;

ステータスを管理するActiveNavを宣言し、現在選択されているアイコンを決定します.
アイコンリンクごとにonClickイベントを選択するたびにactiveNavが置き換えられます.

ActiveNavが各アイコンの番号と同じ場合、classNameにactiveを追加します.

BottomNav.css

/* 네비바 하단 고정 밑 세로 길이 설정 */
.wrapper {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 45px;
}

/* nav태그 아래의 자식들을 수평정렬하기 위한 설정 */
nav {
  overflow: hidden;
  border-top: 2px solid grey;
}
/* nav태그 아래의 div태그들을 수평정렬 및 세로길이 설정 */
nav > div {
  /* 수평정렬, 5개의 button을 각각 20% width만큼 할당 */
  float: left;
  width: 20%;
  text-align: center;

  /* 세로길이 설정 */
  height: 45px;
  line-height: 45px;
}

/* 하단 네비바의 메뉴를 눌렀을 때 색상 변경*/
.nav-item {
  color: grey;
}

/* 하단 네비바의 메뉴를 눌렀을 때 색상 변경*/
.active {
  color: #ef5c89;
}

nav-itemのデフォルトカラーをグレーに設定し、プロジェクトをクリックするとアクティブクラスのカラーを設定します.

で選択したアイコンの色が変更されます.