React Native Collapsible로 Dropdown 만들기

요즘 리액트 네이티브로 앱 개발을 하고 있다.

많은 부분에서 스택 네비게이터 또는 탭 네비게이터를 사용하고 있다.

현재 만들고 있는 부분은 공지사항과 FAQ부분인데,

현존하는 어플들을 살펴보면 여기서도 다양한 방법으로 구현을 하고 있다.

초기에 나는 스택 네비게이터를 사용하여 작성했는데 생각해보니 굳이 이부분까지

스택 네비게이터를 사용할 필요는 없다고 생각됐다.

그래서 그냥 제목을 클릭하면 아래에 공지사항의 내용이 펼쳐지는 형태가 낫다고 판단하고

관련 라이브러리를 찾아보던 중 react-native-collapsible 라는 것을 발견했다.

먼저 yarn을 통해 설치한다.

yarn add react-native-collapsible

그리고 상단에 다음과 같이 import를 해준다.

import Accordion from 'react-native-collapsible/Accordion';

먼저 해당 포스팅에서는 예제에 나와있는 그대로 작성해보겠다.

다음의 내용들을 추가한다.

const SECTIONS = [

  {

    title: 'First',

    content: 'Lorem ipsum…'

  },

  {

    title: 'Second',

    content: 'Lorem ipsum…'

  }

];

 

class AccordionView extends Component {

  _renderHeader(section) {

    return (

      <View style={styles.header}>

        <Text style={styles.headerText}>{section.title}</Text>

      </View>

    );

  }

 

  _renderContent(section) {

    return (

      <View style={styles.content}>

        <Text>{section.content}</Text>

      </View>

    );

  }

SECTIONS부분에 제목, 내용이 저장된다.

코드에서는 class 밖에 빼놨는데 나는 이전 컴포넌트에서 props로 받아와서

state에 저장하여 사용할 예정이다. 물론 현재 포스팅에서는 위 예제대로 진행한다.

_renderHeader는 말그대로 제목을 랜더링해주는 함수이다.

또한 _renderContent는 제목을 클릭했을 때 내용을 랜더링해주는 함수이다.

위와 같이 선언을 해줬으면 실제 컴포넌트 return 부분에 다음과 같이 작성한다.

    return (

      <Accordion

        sections={SECTIONS}

        renderHeader={this._renderHeader}

        renderContent={this._renderContent}

      />

    );

클릭하기 전 상태이다.

클릭을 하면 SECTIONS에 저장해뒀던 내용이 출력된다.

내가 구현하려고 했던 형태와 정확하게 일치한다.

여러가지 props들이 존재하기 때문에 상황에 맞춰서 수정해서 사용하면 된다.

아, 그리고 제목을 클릭했을 때 초기 설정이 Black색상이기 때문에 underlayColor속성을 통해 자신의 색과 맞게 바꿔주자.

상세 내용은 아래 주소를 참고

https://www.npmjs.com/package/react-native-collapsible