{"id":1816,"date":"2025-08-13T07:42:35","date_gmt":"2025-08-13T07:42:35","guid":{"rendered":"https:\/\/www.freelifemakers.org\/wordpress\/?p=1816"},"modified":"2025-08-13T08:51:12","modified_gmt":"2025-08-13T08:51:12","slug":"flmdrawermenu","status":"publish","type":"post","link":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2025\/08\/13\/flmdrawermenu\/","title":{"rendered":"\ub4dc\ub85c\uc5b4\uba54\ub274\/FlmDrawerMenu"},"content":{"rendered":"\n

1.react-native-freelifemakers-ui NPM \ubaa8\ub4c8 \uc124\uce58\ud558\uae30 \/ react-native-freelifemakers-ui NPM Module Install<\/strong><\/p>\n\n\n\n

npm install react-native-freelifemakers-ui<\/code><\/pre>\n\n\n\n
— ReactNative CLI\uc5d0\uc11c \uc0ac\uc6a9\uc2dc\uc5d0\ub294 \ub2e4\uc74c \ubaa8\ub4c8\uc744 \ucd94\uac00\ub85c \uc124\uce58 \ud569\ub2c8\ub2e4.<\/p>\n\n\n\n
npm install react-native-vector-icons<\/code><\/pre>\n\n\n\n
2.\uc0ac\uc6a9\ud558\uae30 \/ Usage<\/strong>
1)\ubaa8\ub4c8 \ubd88\ub7ec\uc624\uae30 \/ import Module<\/p>\n\n\n\n
import { FlmDrawerMenu, FlmText, FlmButton } from \"react-native-freelifemakers-ui\";<\/code><\/pre>\n\n\n\n
2)\uc0ac\uc6a9\ud558\uae30 \/ Usage
— \uae30\ubcf8 \/ Default<\/p>\n\n\n\n
      {\/* \uc608\uc81c 1: \uae30\ubcf8 \uba54\ub274 \/ Default Menu *\/}\n      <FlmDrawerMenu\n        visible={isMenuVisible1}\n        onClose={() => setIsMenuVisible1(false)}\n        items={menuItems1}\n        menuHeader={menuHeader1}\n        menuDirection=\"left\"\n        menuWidth={0.7}\n      \/><\/code><\/pre>\n\n\n\n
— \uc0ac\uc6a9\uc790 \uc815\uc758 \/ Custom<\/p>\n\n\n\n
      {\/* \uc608\uc81c 1: \uae30\ubcf8 \uba54\ub274 \/ Default Menu *\/}\n      <FlmDrawerMenu\n        visible={isMenuVisible1}\n        onClose={() => setIsMenuVisible1(false)}\n        items={menuItems1}\n        menuHeader={menuHeader1}\n        menuDirection=\"left\"\n        menuWidth={0.7}\n      \/><\/code><\/pre>\n\n\n\n
3.\uc608\uc81c\ucf54\ub4dc \/ Example code<\/strong>
1) Expo\uc5d0\uc11c\ub294 \ub2e4\uc74c\uacfc \uac19\uc774 icon\ubaa8\ub4c8\uc744 \ubd88\ub7ec\uc635\ub2c8\ub2e4.
In Expo, the icon module is imported as follows:<\/p>\n\n\n\n
import { Ionicons } from \"@expo\/vector-icons\";<\/code><\/pre>\n\n\n\n
2)ReactNative CLI\uc5d0\uc11c\ub294 \ub2e4\uc74c\uacfc \uac19\uc774 icon\ubaa8\ub4c8\uc744 \ubd88\ub7ec \uc635\ub2c8\ub2e4.
In ReactNative CLI, the icon module is imported as follows:<\/p>\n\n\n\n
import Ionicons from 'react-native-vector-icons\/Ionicons';<\/code><\/pre>\n\n\n\n
3)\uc608\uc81c\ucf54\ub4dc \/ Example code<\/p>\n\n\n\n
import React, { useState } from \"react\";\nimport {\n  SafeAreaView,\n  StyleSheet,\n  Text,\n  View,\n  Button,\n  Alert,\n} from \"react-native\";\nimport { Ionicons } from \"@expo\/vector-icons\";<\/strong>\nimport {\n  FlmDrawerMenu,\n  FlmText,\n  FlmButton,\n} from \"react-native-freelifemakers-ui\";\n\nconst FlmDrawerMenuApp = () => {\n  const [isMenuVisible1, setIsMenuVisible1] = useState(false);\n  const [isMenuVisible2, setIsMenuVisible2] = useState(false);\n  \/**\n   *\n   * @param {string} label - \uc120\ud0dd\ub41c \uba54\ub274 \ud56d\ubaa9\uc758 \ub808\uc774\ube14\uc785\ub2c8\ub2e4. \/ The label of the selected menu item.\n   *\/\n\n  const selectedMenu = (label) => {\n    \/\/ \ub9e4\uac1c\ubcc0\uc218 'label' \uac12\uc744 \uc0ac\uc6a9\ud558\uc5ec Alert \uba54\uc2dc\uc9c0\ub97c \ub3d9\uc801\uc73c\ub85c \ubcc0\uacbd\ud569\ub2c8\ub2e4.\n    \/\/ Dynamically change the Alert message using the value of the parameter 'label'.\n    console.log(`\uc120\ud0dd\ub41c \uba54\ub274\/Selected Menu: ${label}`);\n    Alert.alert(\n      `${label} \uc120\ud0dd\ub428\/Selected ${label}`,\n      `${label}\uc5d0 \ub300\ud55c \ucd94\uac00 \ub85c\uc9c1\uc774 \uc2e4\ud589\ub429\ub2c8\ub2e4.\/Additional logic for ${label} will be executed.`,\n    ); \/\/ \uba54\ub274 \ud56d\ubaa9\uc744 \uc120\ud0dd\ud55c \ud6c4 \uba54\ub274\ub97c \uc790\ub3d9\uc73c\ub85c \ub2eb\uc2b5\ub2c8\ub2e4. \/ Automatically closes the menu after selecting a menu item.\n    setIsMenuVisible1(false);\n    setIsMenuVisible2(false);\n  };\n\n  \/\/ --- \uc608\uc81c 1: \uae30\ubcf8 \uc2a4\ud0c0\uc77c \uba54\ub274 ---\n  \/\/ --- Example 1: Default Style Menu ---\n  const menuItems1 = [\n    {\n      label: \"\ud648\/Home\",\n      icon: <Ionicons name=\"home\" size={20} color=\"#333\" \/>,\n      onPress: () => selectedMenu(\"\ud648\/Home\"),\n    },\n    {\n      label: \"\ud504\ub85c\ud544\/Profile\",\n      icon: <Ionicons name=\"person\" size={20} color=\"#333\" \/>,\n      onPress: () => selectedMenu(\"\ud504\ub85c\ud544\/Profile\"),\n    },\n    {\n      label: \"\uc124\uc815\/Settings\",\n      icon: <Ionicons name=\"settings\" size={20} color=\"#333\" \/>,\n      onPress: () => selectedMenu(\"\uc124\uc815\/Settings\"),\n    },\n  ];\n\n  const menuHeader1 = (\n    <View style={{ padding: 20, backgroundColor: \"#f0f0f0\" }}>\n      <Text style={{ fontSize: 20, fontWeight: \"bold\" }}>\uae30\ubcf8 \uba54\ub274<\/Text>\n      <Text>\ud658\uc601\ud569\ub2c8\ub2e4!<\/Text>\n    <\/View>\n  );\n\n  \/\/ --- \uc608\uc81c 2: \ucee4\uc2a4\ud140 \uc2a4\ud0c0\uc77c \uba54\ub274 ---\n  \/\/ --- Example 2: Custom Style Menu ---\n  const menuItems2 = [\n    {\n      label: \"\uc0c8\ub85c\uc6b4 \uc18c\uc2dd\/News\",\n      icon: <Ionicons name=\"newspaper-outline\" size={22} color=\"#fff\" \/>,\n      onPress: () => selectedMenu(\"\uc0c8\ub85c\uc6b4\uc18c\uc2dd\/News\"),\n    },\n    {\n      label: \"\ub0b4 \uba54\uc2dc\uc9c0\/Messages\",\n      icon: <Ionicons name=\"chatbox-outline\" size={22} color=\"#fff\" \/>,\n      onPress: () => selectedMenu(\"\ub0b4 \uba54\uc138\uc9c0\/Message\"),\n    },\n    {\n      label: \"\ub85c\uadf8\uc544\uc6c3\/Logout\",\n      icon: <Ionicons name=\"log-out-outline\" size={22} color=\"#fff\" \/>,\n      onPress: () => selectedMenu(\"\ub85c\uadf8\uc544\uc6c3\/Logout\"),\n    },\n  ];\n\n  const menuHeader2 = (\n    <View\n      style={{\n        padding: 20,\n        backgroundColor: \"#1e88e5\",\n        flexDirection: \"row\",\n        alignItems: \"center\",\n      }}\n    >\n      <Ionicons\n        name=\"person-circle-outline\"\n        size={40}\n        color=\"#fff\"\n        style={{ marginRight: 10 }}\n      \/>\n      <View>\n        <Text style={{ fontSize: 22, fontWeight: \"bold\", color: \"#fff\" }}>\n          User Name\n        <\/Text>\n        <Text style={{ color: \"#e3f2fd\" }}>user@example.com<\/Text>\n      <\/View>\n    <\/View>\n  );\n\n  return (\n    <SafeAreaView style={styles.container}>\n      <Text style={styles.title}>\uba54\ub274 \uc608\uc2dc\/Menu Example<\/Text>\n      <View style={styles.buttonContainer}>\n        <FlmButton\n          title=\"\uae30\ubcf8 \uba54\ub274 \uc5f4\uae30\/Default Menu Open\"\n          onPress={() => setIsMenuVisible1(true)}\n          style={{ marginBottom: 10 }}\n        \/>\n      <\/View>\n      <View style={styles.buttonContainer}>\n        <FlmButton\n          title=\"\ucee4\uc2a4\ud140 \uba54\ub274 \uc5f4\uae30\/Cusom Menu Open\"\n          onPress={() => setIsMenuVisible2(true)}\n        \/>\n      <\/View>\n      {\/* \uc608\uc81c 1: \uae30\ubcf8 \uba54\ub274 \/ Default Menu *\/}\n      <FlmDrawerMenu\n        visible={isMenuVisible1}\n        onClose={() => setIsMenuVisible1(false)}\n        items={menuItems1}\n        menuHeader={menuHeader1}\n        menuDirection=\"left\"\n        menuWidth={0.7}\n      \/>\n      {\/* \uc608\uc81c 2: \ucee4\uc2a4\ud140 \uba54\ub274 \/ Custom Menu *\/}\n      <FlmDrawerMenu\n        visible={isMenuVisible2}\n        onClose={() => setIsMenuVisible2(false)}\n        items={menuItems2}\n        menuHeader={menuHeader2}\n        menuDirection=\"right\"\n        menuWidth={0.8}\n        menuContainerStyle={{ backgroundColor: \"#9370DB\" }}\n        menuItemStyle={{ borderBottomColor: \"#7555B0\", paddingVertical: 18 }}\n        itemTextStyle={{ fontSize: 18, color: \"#fff\", fontWeight: \"bold\" }}\n        overlayColor=\"rgba(33, 150, 243, 0.3)\"\n      \/>\n    <\/SafeAreaView>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: \"center\",\n    alignItems: \"center\",\n  },\n  title: {\n    fontSize: 24,\n    marginBottom: 20,\n  },\n  buttonContainer: {\n    flexDirection: \"row\",\n    justifyContent: \"space-around\",\n    width: \"80%\",\n  },\n});\n\nexport default FlmDrawerMenuApp;\n<\/code><\/pre>\n\n\n\n
4.\uc2a4\ud06c\ub9b0\uc0f7\/ScreenShot<\/strong><\/p>\n\n\n\n
\n