텍스트/FlmText

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

npm install react-native-freelifemakers-ui

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