1.react-native-freelifemakers-ui NPM 모듈 설치하기 / react-native-freelifemakers-ui NPM Module Install
# npm install react-native-freelifemakers-ui2.사용하기 / Usage
1)모듈 불러오기 / import Module
import { FlmCard, FlmText, FlmButton } from "react-native-freelifemakers-ui";2)카드 / FlmCard
<FlmCard>
<FlmText category="subtitle">이것은 기본 카드입니다.</FlmText>
<FlmText category="subtitle">This is a basic card.</FlmText>
<Text style={styles.cardContentText}>
추가 콘텐츠를 여기에 넣을 수 있습니다. / You can add additional
content here.
</Text>
</FlmCard>3.예제코드 / Example Code
import React, { useState } from "react";
import { View, Text, StyleSheet, Alert, ScrollView, Image } from "react-native";
import { FlmCard, FlmText, FlmButton } from "react-native-freelifemakers-ui";
// FlmCardExample 컴포넌트
// This component demonstrates the usage of FlmCard.
const FlmCardApp = () => {
const [cardPressCount, setCardPressCount] = useState(0);
const handleCardPress = (cardName) => {
setCardPressCount((prevCount) => prevCount + 1);
// 간단한 Alert 사용 (In real apps, use a custom modal)
Alert.alert(
"카드 클릭 / Card Clicked",
`${cardName} 카드가 클릭되었습니다! (총 ${cardPressCount + 1}회)\n"${cardName}" card was clicked! (Total ${cardPressCount + 1} times)`,
[{ text: "확인 (OK)" }],
);
};
return (
<ScrollView style={styles.scrollViewContainer}>
<View style={styles.container}>
<FlmText category="subtitle" style={{ marginTop: 20 }}>
FlmCard 사용 예시 / FlmCard Example
</FlmText>
{/* 기본 카드 (Basic Card) */}
<FlmText category="subtitle" style={{ marginTop: 20 }}>
기본카드 / Basic FlmCard
</FlmText>
<FlmCard>
<FlmText category="subtitle">이것은 기본 카드입니다.</FlmText>
<FlmText category="subtitle">This is a basic card.</FlmText>
<Text style={styles.cardContentText}>
추가 콘텐츠를 여기에 넣을 수 있습니다. / You can add additional
content here.
</Text>
</FlmCard>
{/* 제목과 부제목이 있는 카드 (Card with Title and Subtitle) */}
<FlmText category="subtitle" style={{ marginTop: 20 }}>
제목과 부제목이 있는 카드
</FlmText>
<FlmText category="subtitle">Card with Title and Subtitle</FlmText>
<FlmCard
title="카드 제목 / Card Title"
subtitle="이것은 카드의 부제목입니다. (This is the card's subtitle)"
>
<Text style={styles.cardContentText}>
제목과 부제목이 있는 카드입니다. (Card with title and subtitle.)
</Text>
<Text style={styles.cardContentText}>
카드 내용이 여기에 표시됩니다. (Card content is displayed here.)
</Text>
</FlmCard>
{/* 커스텀 스타일 및 onPress 기능이 있는 카드 / Card with Custom Styles and onPress */}
<FlmText category="subtitle" style={{ marginTop: 20 }}>
커스텀 스타일 및 onPress 기능이 있는 카드
</FlmText>
<FlmText category="subtitle">
Card with Custom Styles and onPress
</FlmText>
<FlmCard
title="클릭 가능한 카드 / Clickable Card"
subtitle="이 카드를 눌러보세요! / Try tapping this card!"
onPress={() => handleCardPress("클릭 가능한 / Clickable")}
style={styles.clickableCard}
titleStyle={styles.clickableCardTitle}
elevation={5}
borderRadius={12}
>
<Text style={styles.cardContentText}>
이 카드를 누르면 알림이 표시됩니다./ An alert is shown when this
card is tapped.
</Text>
<Text style={styles.cardContentText}>
클릭 횟수: {cardPressCount} / Click Count: {cardPressCount}
</Text>
</FlmCard>
{/* 배경색이 다른 카드 / Card with Different Background Color */}
<FlmText category="subtitle" style={{ marginTop: 20 }}>
배경색이 다른 카드
</FlmText>
<FlmText category="subtitle">
Card with Different Background Color
</FlmText>
<FlmCard
title="다른 색상의 카드 / Card with Different Color"
backgroundColor="#e0f2f7"
elevation={3}
>
<Text style={styles.cardContentText}>
이 카드는 다른 배경색을 가지고 있습니다. / This card has a different
background color.
</Text>
</FlmCard>
{/* 콘텐츠 패딩을 조정한 카드 / Card with Adjusted Content Padding */}
<FlmText category="subtitle" style={{ marginTop: 20 }}>
콘텐츠 패딩을 조정한 카드
</FlmText>
<FlmText category="subtitle">
Card with Adjusted Content Padding
</FlmText>
<FlmCard
title="패딩 조정 카드 / Card with Custom Padding"
contentStyle={{ paddingHorizontal: 30, paddingVertical: 20 }}
>
<Text style={styles.cardContentText}>
이 카드는 내부 콘텐츠의 패딩이 다릅니다. / This card has customized
inner padding.
</Text>
</FlmCard>
{/* 이미지 카드 (Image Card) */}
<FlmText category="subtitle" style={{ marginTop: 20 }}>
이미지 카드
</FlmText>
<FlmText category="subtitle">Image Card</FlmText>
<FlmCard
title="이미지 카드 / Image Card"
subtitle="아름다운 풍경 이미지 / Beautiful Landscape Image"
elevation={4}
borderRadius={10}
>
<Image
source={{
uri: "https://picsum.photos/400/200",
}}
style={styles.cardImage}
resizeMode="cover"
onError={(e) =>
console.log("Image loading error:", e.nativeEvent.error)
}
/>
<Text style={styles.cardContentText}>
이 카드는 이미지를 포함하고 있습니다. 이미지 아래에 추가적인 설명을
넣을 수 있습니다. / This card contains an image. Additional
description can be added below the image.
</Text>
</FlmCard>
</View>
</ScrollView>
);
};
const styles = StyleSheet.create({
scrollViewContainer: {
flex: 1,
backgroundColor: "#f0f2f5",
},
container: {
padding: 10,
alignItems: "center",
paddingBottom: 30,
},
cardContentText: {
fontSize: 16,
color: "#555555",
lineHeight: 24,
},
clickableCard: {
backgroundColor: "#fff3e0",
borderWidth: 1,
borderColor: "#ffab40",
},
clickableCardTitle: {
color: "#d84315",
},
cardImage: {
alignSelf: "stretch",
height: 200,
borderRadius: 8,
marginBottom: 10,
},
});
export default FlmCardApp;
4.스크린샷/ScreenShot