Flatlist + SearchBar (3편 공식문서 SearchBar형)

이번 SearchBar 구현은 총 3가지 형식으로 구성했다.

1) <TextInput> 태그형   ( 링크 : https://radpro.tistory.com/58 )

2) FlatList에 붙는 Header형    ( 링크 : https://radpro.tistory.com/59 )

3) 공식문서의 Search바 응용형   ( 링크 : https://radpro.tistory.com/60 )

 

본인 취향에 맞게 사용하면 되나, 개인적으로 <TextInput>형이 연동과 렌더링에 가장 용이하다고 판단한다.

 

------------------------------------------------------------------------------------------------

공식문서 : https://callstack.github.io/react-native-paper/searchbar.html

 

1. 설치파일

 ㄱ. Flatlist를 하나 만들어준다.

 ㄴ. SearchBar 확장을 설치해주자

yarn add react-native-paper

 

2. 사용방법

 ㄱ. SearchBar.js로 컴포넌트 파일을 만들어 준다.

 

 ㄴ. import 단계 : 방금 설치한것 import해오자 (얘로 TextInput대체)

import { Searchbar } from 'react-native-paper';

 ㄷ. 공식문서의 코드를 그대로 복붙한다.

const MyComponent = () => {
  const [searchQuery, setSearchQuery] = React.useState('');

  const onChangeSearch = query => setSearchQuery(query);

  return (
    <Searchbar
      placeholder="Search"
      onChangeText={onChangeSearch}
      value={searchQuery}
    />
  );
};

export default MyComponent;

 ㄹ. 원하는 파일에 방금 만든 SearchBar.js를 import해준다

 

 ㅁ. return문에 원하는 위치에 <SearchBar>태그로 넣어준다.

 

 ㅂ. 쿼리 연결은 추후 업데이트