버튼/FlmButton

리액트네이티브 엑스포와 CLI에서 모두 사용가능합니다.
Available for use with both React Native Expo and ReactNativeCLI.

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

npm install react-native-freelifemakers-ui

2.사용하기 / Usage

1)FlmButton 버튼사용 / Use FlmButton
— 모듈 임포트 / module import

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

— 코드 / code

    {/* default */}
      <FlmButton
        title="Click!"
        onPress={handlePress}
      />

    {/* 스타일 추가버튼 / Add style button */}
    <FlmButton
        title="Green Button"
        onPress={goToApp}
        style={{ backgroundColor: '#28a745', marginTop: 20 }}
        textStyle={{ fontSize: 18 }}
    />

    {/* 비활성화된 버튼 / Disable Button*/}
    <FlmButton
        title="Disable Button"
        onPress={handlePress}
        disabled={true}
        style={{ marginTop: 20 }}
    />

2)FlmText 사용 / Use FlmText
— 모듈 임포트 / module import

import { FlmButton } from "react-native-freelifemakers-ui"; // 사용법 / Usage

— 코드 / code

import { Alert, Text, View, ScrollView, SafeAreaView } from "react-native";
import { FlmButton } from "react-native-freelifemakers-ui"; // 사용법 / Usage
//import { FlmRadioGroup } from "./FlmRadioGroups";
import { Ionicons } from "@expo/vector-icons";
import { useRouter } from "expo-router"; // useRouter 훅 임포트

const handlePress = () => {
  Alert.alert("버튼이 눌렸습니다!!/The button was pressed!!.");
};

export default function Index() {
  // useRouter 훅을 컴포넌트의 최상위 레벨에서 호출합니다.
  const router = useRouter();

  const handleIconButtonPress = () => {
    // 이제 router 객체를 사용하여 화면 이동을 처리합니다.
    // '/flmText' 경로로 이동한다고 가정합니다.
    // 이 경로에 해당하는 파일 (예: app/flmText.tsx 또는 app/flmText.js)이 있어야 합니다.
    router.push("/flmText");
  };

  // 함수 정의 시 인자를 받도록 변경
  const navigateToScreen = (screenName) => {
    console.log(`Navigating to: /${screenName}`);
    router.push(`/${screenName}`);
  };

  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: "#f9f9f9" }}>
      <ScrollView contentContainerStyle={{ padding: 20, alignItems: "center" }}>
        <Text style={{ marginBottom: 20 }}>FlmButton Style</Text>

        {/* 기본버튼 / default button */}
        <FlmButton title="Default Button" onPress={handlePress} />

        {/* 연두색 버튼 / Green Color Button*/}
        <FlmButton
          title="Green Button"
          onPress={handlePress}
          style={{ backgroundColor: "#28a745", marginTop: 20 }}
          textStyle={{ fontSize: 18 }}
        />

        {/* 아이콘을 버튼 / icon button */}
        <FlmButton
          title="Icon Button!"
          icon={<Ionicons name="heart-outline" size={20} color="white" />}
          onPress={handleIconButtonPress} // 수정된 핸들러 연결
          style={{ backgroundColor: "#FFA500", marginTop: 20 }}
        />

        {/* 비활성화된 버튼 / Disable Button*/}
        <FlmButton
          title="Disable Button"
          onPress={handlePress}
          disabled={true}
          style={{ marginTop: 20 }}
        />

        {/* 아이콘을 버튼2 / icon button */}
        <FlmButton
          title="move to FlmTextInput"
          icon={<Ionicons name="heart-outline" size={20} color="white" />}
          onPress={() => navigateToScreen("flmTextInput")} //
          style={{ backgroundColor: "#FFA500", marginTop: 20 }}
        />

        {/* 기본버튼2 / default button2 */}
        <FlmButton
          title="move to FlmRadio"
          onPress={() => navigateToScreen("flmRadio")}
          style={{ marginTop: 20 }}
        />
        {/* 기본버튼3 / default button3 / FlmCheckBox */}
        <FlmButton
          title="move to FlmCheckBox"
          onPress={() => navigateToScreen("flmCheckBox")}
          style={{ marginTop: 20 }}
        />
        {/* 기본버튼3 / default button3 / FlmModal */}
        <FlmButton
          title="move to FlmModal"
          onPress={() => navigateToScreen("flmModal")}
          style={{ marginTop: 20 }}
        />
        {/* 기본버튼4 / default button4 / FlmBottomSheet */}
        <FlmButton
          title="move to FlmBottomSheet"
          onPress={() => navigateToScreen("flmBottomSheet")}
          style={{ marginTop: 20 }}
        />
        {/* 기본버튼5 / default button5 / FlmSnackBar - Using Context API */}
        <FlmButton
          title="move to FlmSnackBar"
          onPress={() => navigateToScreen("flmSnackBar")}
          style={{ marginTop: 20 }}
        />
        {/* 기본버튼6 / default button6 / FlmSnackBar - Custom */}
        <FlmButton
          title="move to FlmSnackBar Custom"
          onPress={() => navigateToScreen("flmSnackBarCustom")}
          style={{ marginTop: 20 }}
        />
        {/* 기본버튼7 / default button7 / FlmSearchBar #007bff #9370DB*/}
        <FlmButton
          title="move to FlmSearchBar Custom"
          onPress={() => navigateToScreen("flmSearchBar")}
          style={{ backgroundColor: "#F44336", marginTop: 20 }}
        />
      </ScrollView>
    </SafeAreaView>
  );
}

3.스크린샷 / ScreenShot