🌏 검색바는 앱 내에서 검색을 할 수 있게 만든 input box입니다.
The search bar is an input box that allows you to search within the app.
🌏 스크린샷/ScreenShot
구글드라이브/Google Drive :
https://drive.google.com/drive/folders/1hhhIYmU8kSGOUTN9wd7H9igSppl6AE71?usp=drive_link
1.react-native-freelifemakers-ui NPM 모듈 설치하기 / react-native-freelifemakers-ui NPM Module Install
npm install react-native-freelifemakers-ui2.의존성 모듈 설치하기 / peerDependinceis Module Install
— 모듈내에 package.json파일에는 다음과 같은 peerDependencies가 있습니다.
The package.json file within the module contains the following peerDependencies:
— npm 명령어로 설치 하시면 됩니다.
You can install it using the npm command.
— FlmSearchBar는 react-native-vector-icons 모듈이 설치되어야합니다.
FlmSearchBar requires the react-native-vector-icons module to be installed.
— react-native-vector-icons설치 버전은 최신버전 설치 하시면 됩니다.
Please install the latest version of react-native-vector-icons.
"peerDependencies": {
"react": "*",
"react-native": "*",
"react-native-gesture-handler": ">=2.12.0",
"react-native-reanimated": ">=3.17.0",
"react-native-vector-icons": ">=10.2.0"
},2.사용하기 / Usage
1)기본 검색바 / FlmSearchBar
— 보라색 부분이 실제로 검색바 부분입니다.
The purple part is actually the search bar.
import React, { useState } from "react";
import {
View,
Text,
StyleSheet,
SafeAreaView,
ScrollView,
Alert,
} from "react-native";
import {
FlmSearchBar,
FlmButton,
FlmText,
} from "react-native-freelifemakers-ui";
export default function FlmSearchBarApp() {
const [searchText, setSearchText] = useState("");
//
// Search submission handler
const handleSearchSubmit = () => {
console.log("검색 제출/Submit Search:", searchText);
// 실제 검색 로직을 여기에 구현합니다.
// Implement the actual search logic here.
Alert.alert(
`검색 제출/Submit Search`,
`'${searchText}'(으)로 검색합니다./Search for '${searchText}'.`,
);
};
// 검색어 지우기 핸들러
// Clear search term handler
const handleClearSearch = () => {
console.log("검색어 지우기/Clear search term");
// 검색어 지우기 시 추가적인 로직이 필요하면 여기에 구현합니다.
// If additional logic is needed when clearing search terms, implement it here.
Alert.alert(
`검색어 지우기/Clear search term`,
`검색어가 지워졌습니다./Your search term has been cleared.`,
);
};
return (
<SafeAreaView>
<ScrollView>
<FlmSearchBar
value={searchText}
onChangeText={setSearchText}
placeholder="여기에 검색어를 입력하세요/Enter your search term here"
onSubmitEditing={handleSearchSubmit}
onClear={handleClearSearch}
style={styles.searchBarMargin}
/>
</ScrollView>
</SafeAreaView>
);
}
}3.예제코드 / Example code
— 아래의 코드에서 import Ionicons from ‘react-native-vector-icons/Ionicons’;이 부분은 ReactNative CLI에만 해당됩니다.
In the code below, import Ionicons from ‘react-native-vector-icons/Ionicons’; This part is only for ReactNative CLI.
— 엑스포 사용자는 위의 코드를 주석처리 해주세요
Expo users, please comment out the code above.
// flmSearchBar.js
import React, {useState} from 'react';
import {
View,
Text,
StyleSheet,
SafeAreaView,
ScrollView,
Alert,
} from 'react-native';
// ReactNative CLI인경우
// npm install react-native-vector-icons
import Ionicons from 'react-native-vector-icons/Ionicons';
// Expo는 react-native-vector-icons를 내장하고 있음
// Expo includes react-native-vector-icons by default.
// import {Ionicons} from '@expo/vector-icons';
// react-native-freelifemakers-ui 패키지에서 FlmSearchBar 임포트
import {FlmSearchBar, FlmButton, FlmText} from 'react-native-freelifemakers-ui';
export default function FlmSearchBarApp() {
const [searchText, setSearchText] = useState('');
// 검색 제출 핸들러
// Search submission handler
const handleSearchSubmit = () => {
console.log('검색 제출/Submit Search:', searchText);
// 실제 검색 로직을 여기에 구현합니다.
// Implement the actual search logic here.
Alert.alert(
`검색 제출/Submit Search`,
`'${searchText}'(으)로 검색합니다./Search for '${searchText}'.`,
);
};
// 검색어 지우기 핸들러
// Clear search term handler
const handleClearSearch = () => {
console.log('검색어 지우기/Clear search term');
// 검색어 지우기 시 추가적인 로직이 필요하면 여기에 구현합니다.
// If additional logic is needed when clearing search terms, implement it here.
Alert.alert(
`검색어 지우기/Clear search term`,
`검색어가 지워졌습니다./Your search term has been cleared.`,
);
};
return (
<SafeAreaView style={styles.safeArea}>
<ScrollView contentContainerStyle={styles.scrollViewContent}>
<Text style={styles.header}>FlmSearchBar</Text>
{/* 기본 검색 바 / Default Search Bar */}
<FlmText style={styles.subHeader}>
기본 검색 바 / Default Search Bar
</FlmText>
<FlmSearchBar
value={searchText}
onChangeText={setSearchText}
placeholder="여기에 검색어를 입력하세요/Enter your search term here"
onSubmitEditing={handleSearchSubmit}
onClear={handleClearSearch}
style={styles.searchBarMargin}
/>
<FlmText style={styles.currentSearchText}>
현재 검색어/ Current search term: {searchText || '없음/none'}
</FlmText>
{/* 커스터마이징된 검색 바 예시 / Example of a customized search bar */}
<FlmText style={styles.subHeader}>
커스텀 스타일 검색 바 / Custom style search bar
</FlmText>
<FlmSearchBar
value={searchText}
onChangeText={setSearchText}
placeholder="다른 스타일의 검색 바/Search bar in different styles"
placeholderTextColor="#aaa"
style={styles.customSearchBar}
inputStyle={styles.customInput}
showClearButton={false} // 지우기 버튼 숨기기 / Hide the erase button
/>
{/* 다른 컴포넌트와의 조합 예시 / Example of combination with other components */}
<FlmText style={styles.subHeader}>
버튼과 함께 검색 / Search with button
</FlmText>
<FlmSearchBar
value={searchText}
onChangeText={setSearchText}
placeholder="버튼과 함께 검색/Search with button"
onSubmitEditing={handleSearchSubmit}
keyboardType="web-search"
/>
<FlmButton
title="검색 실행/Run search"
onPress={handleSearchSubmit}
style={styles.searchButton}
/>
{/* 하단 여백 / bottom margin */}
<View style={{height: 50}} />
</ScrollView>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
safeArea: {
flex: 1,
backgroundColor: '#f8f8f8',
},
scrollViewContent: {
flexGrow: 1,
paddingVertical: 20,
alignItems: 'center',
},
header: {
fontSize: 28,
fontWeight: 'bold',
marginBottom: 30,
color: '#333',
},
subHeader: {
fontSize: 20,
fontWeight: '600',
marginTop: 30,
marginBottom: 15,
color: '#555',
},
searchBarMargin: {
marginBottom: 20,
},
currentSearchText: {
fontSize: 16,
color: '#666',
marginBottom: 20,
},
customSearchBar: {
backgroundColor: '#e0f7fa', // 밝은 파란색 배경 / light blue background
borderRadius: 10,
borderWidth: 1,
borderColor: '#b2ebf2',
height: 45,
marginVertical: 10,
},
customInput: {
color: '#00796b', // 진한 청록색 텍스트 / Dark turquoise text
fontWeight: 'bold',
},
searchButton: {
marginTop: 10,
backgroundColor: '#007bff',
},
});
4.스크린샷/ScreenShot