버튼/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 { FlmText } from 'react-native-freelifemakers-ui'; // 사용법 / Usage

— 코드 / code

     <View style={styles.container}>
        <FlmText category="subtitle">1.기본 텍스트 / Basic Text</FlmText>
        <FlmText>FlmText1 - Basic</FlmText>
        <FlmText style={styles.sectionMargin}>FlmText1</FlmText>

        <FlmText category="subtitle">
          2.카테고리적용 / Apply Category : category =
          [Heading(H1~H6),Paragraph(p1,p2)]
        </FlmText>
        <FlmText>FlmText2 : categoy=h1 </FlmText>
        <FlmText category="h1" style={styles.sectionMargin}>
          FlmText2
        </FlmText>

        <FlmText>FlmText 3 - categoy=p1 </FlmText>
        <FlmText category="p1" style={styles.sectionMargin}>
          FlmText3
        </FlmText>

        <FlmText>FlmText 4 category=subtitle</FlmText>
        <FlmText category="subtitle" style={styles.sectionMargin}>
          FlmText4
        </FlmText>

        <FlmText>FlmText 5 category=label</FlmText>
        <FlmText category="label" style={styles.sectionMargin}>
          FlmText4
        </FlmText>

        <FlmText>FlmText 5 category=caption</FlmText>
        <FlmText category="caption" style={styles.sectionMargin}>
          FlmText4
        </FlmText>

        <FlmText category="subtitle">
          3.기타스타일적용 / Apply other styles : Style=[StyleSheet]
        </FlmText>
        <FlmText
          category="p1"
          style={{backgroundColor: '#e0ffe0', padding: 10, borderRadius: 5}}>
          P1에 배경색과 패딩을 추가했습니다. / Adding background and padding
        </FlmText>

        const styles = StyleSheet.create({
            sectionMargin: {
                marginBottom: 20, // Section Margin
            },
        });

3.스크린샷 / ScreenShot