드로어메뉴/FlmDrawerMenu

1.react-native-freelifemakers-ui NPM 모듈 설치하기 / react-native-freelifemakers-ui NPM Module Install

npm install react-native-freelifemakers-ui

— ReactNative CLI에서 사용시에는 다음 모듈을 추가로 설치 합니다.

npm install react-native-vector-icons

2.사용하기 / Usage
1)모듈 불러오기 / import Module

import { FlmDrawerMenu, FlmText, FlmButton } from "react-native-freelifemakers-ui";

2)사용하기 / Usage
— 기본 / Default

      {/* 예제 1: 기본 메뉴 / Default Menu */}
      <FlmDrawerMenu
        visible={isMenuVisible1}
        onClose={() => setIsMenuVisible1(false)}
        items={menuItems1}
        menuHeader={menuHeader1}
        menuDirection="left"
        menuWidth={0.7}
      />

— 사용자 정의 / Custom

      {/* 예제 1: 기본 메뉴 / Default Menu */}
      <FlmDrawerMenu
        visible={isMenuVisible1}
        onClose={() => setIsMenuVisible1(false)}
        items={menuItems1}
        menuHeader={menuHeader1}
        menuDirection="left"
        menuWidth={0.7}
      />

3.예제코드 / Example code
1) Expo에서는 다음과 같이 icon모듈을 불러옵니다.
In Expo, the icon module is imported as follows:

import { Ionicons } from "@expo/vector-icons";

2)ReactNative CLI에서는 다음과 같이 icon모듈을 불러 옵니다.
In ReactNative CLI, the icon module is imported as follows:

import Ionicons from 'react-native-vector-icons/Ionicons';

3)예제코드 / Example code

import React, { useState } from "react";
import {
  SafeAreaView,
  StyleSheet,
  Text,
  View,
  Button,
  Alert,
} from "react-native";
import { Ionicons } from "@expo/vector-icons";
import {
  FlmDrawerMenu,
  FlmText,
  FlmButton,
} from "react-native-freelifemakers-ui";

const FlmDrawerMenuApp = () => {
  const [isMenuVisible1, setIsMenuVisible1] = useState(false);
  const [isMenuVisible2, setIsMenuVisible2] = useState(false);
  /**
   *
   * @param {string} label - 선택된 메뉴 항목의 레이블입니다. / The label of the selected menu item.
   */

  const selectedMenu = (label) => {
    // 매개변수 'label' 값을 사용하여 Alert 메시지를 동적으로 변경합니다.
    // Dynamically change the Alert message using the value of the parameter 'label'.
    console.log(`선택된 메뉴/Selected Menu: ${label}`);
    Alert.alert(
      `${label} 선택됨/Selected ${label}`,
      `${label}에 대한 추가 로직이 실행됩니다./Additional logic for ${label} will be executed.`,
    ); // 메뉴 항목을 선택한 후 메뉴를 자동으로 닫습니다. / Automatically closes the menu after selecting a menu item.
    setIsMenuVisible1(false);
    setIsMenuVisible2(false);
  };

  // --- 예제 1: 기본 스타일 메뉴 ---
  // --- Example 1: Default Style Menu ---
  const menuItems1 = [
    {
      label: "홈/Home",
      icon: <Ionicons name="home" size={20} color="#333" />,
      onPress: () => selectedMenu("홈/Home"),
    },
    {
      label: "프로필/Profile",
      icon: <Ionicons name="person" size={20} color="#333" />,
      onPress: () => selectedMenu("프로필/Profile"),
    },
    {
      label: "설정/Settings",
      icon: <Ionicons name="settings" size={20} color="#333" />,
      onPress: () => selectedMenu("설정/Settings"),
    },
  ];

  const menuHeader1 = (
    <View style={{ padding: 20, backgroundColor: "#f0f0f0" }}>
      <Text style={{ fontSize: 20, fontWeight: "bold" }}>기본 메뉴</Text>
      <Text>환영합니다!</Text>
    </View>
  );

  // --- 예제 2: 커스텀 스타일 메뉴 ---
  // --- Example 2: Custom Style Menu ---
  const menuItems2 = [
    {
      label: "새로운 소식/News",
      icon: <Ionicons name="newspaper-outline" size={22} color="#fff" />,
      onPress: () => selectedMenu("새로운소식/News"),
    },
    {
      label: "내 메시지/Messages",
      icon: <Ionicons name="chatbox-outline" size={22} color="#fff" />,
      onPress: () => selectedMenu("내 메세지/Message"),
    },
    {
      label: "로그아웃/Logout",
      icon: <Ionicons name="log-out-outline" size={22} color="#fff" />,
      onPress: () => selectedMenu("로그아웃/Logout"),
    },
  ];

  const menuHeader2 = (
    <View
      style={{
        padding: 20,
        backgroundColor: "#1e88e5",
        flexDirection: "row",
        alignItems: "center",
      }}
    >
      <Ionicons
        name="person-circle-outline"
        size={40}
        color="#fff"
        style={{ marginRight: 10 }}
      />
      <View>
        <Text style={{ fontSize: 22, fontWeight: "bold", color: "#fff" }}>
          User Name
        </Text>
        <Text style={{ color: "#e3f2fd" }}>user@example.com</Text>
      </View>
    </View>
  );

  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.title}>메뉴 예시/Menu Example</Text>
      <View style={styles.buttonContainer}>
        <FlmButton
          title="기본 메뉴 열기/Default Menu Open"
          onPress={() => setIsMenuVisible1(true)}
          style={{ marginBottom: 10 }}
        />
      </View>
      <View style={styles.buttonContainer}>
        <FlmButton
          title="커스텀 메뉴 열기/Cusom Menu Open"
          onPress={() => setIsMenuVisible2(true)}
        />
      </View>
      {/* 예제 1: 기본 메뉴 / Default Menu */}
      <FlmDrawerMenu
        visible={isMenuVisible1}
        onClose={() => setIsMenuVisible1(false)}
        items={menuItems1}
        menuHeader={menuHeader1}
        menuDirection="left"
        menuWidth={0.7}
      />
      {/* 예제 2: 커스텀 메뉴 / Custom Menu */}
      <FlmDrawerMenu
        visible={isMenuVisible2}
        onClose={() => setIsMenuVisible2(false)}
        items={menuItems2}
        menuHeader={menuHeader2}
        menuDirection="right"
        menuWidth={0.8}
        menuContainerStyle={{ backgroundColor: "#9370DB" }}
        menuItemStyle={{ borderBottomColor: "#7555B0", paddingVertical: 18 }}
        itemTextStyle={{ fontSize: 18, color: "#fff", fontWeight: "bold" }}
        overlayColor="rgba(33, 150, 243, 0.3)"
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  title: {
    fontSize: 24,
    marginBottom: 20,
  },
  buttonContainer: {
    flexDirection: "row",
    justifyContent: "space-around",
    width: "80%",
  },
});

export default FlmDrawerMenuApp;

4.스크린샷/ScreenShot