react-native dropdown 추가하기

 

1.간다

 

https://github.com/n4kz/react-native-material-dropdown

 

n4kz/react-native-material-dropdown

2.깐다

npm install --save react-native-material-dropdown

 

 

 

 

목표로하는 결과물 

 

현실

 

????????????????

 

 

문제점 

1. 안 보임

2. 드롭다운이 라벨이 기준이 아니라 라벨 보다 하나 위의 아이템에서 시작함

아마 위의 두 문제는 대부분 적용하는 사람들이 겪을거라고 봅니다. 

드롭다운에서 기대하는 애니메이션은 현재 선택된 라벨을 기준으로 해서 내려가는 것이니까요 일반적으로..

제가 변경시킨 코드는 제 레이아웃에 의존적이므로 그냥 캡처본만 올리고 핵심이 되는 property 들이 무엇인지 알려드리겠습니다.

원하는대로 작동되지 않는 코드

 

해결법

1. 안 보임

   문서에보면

   이 dropdownOffset 이란게 디폴트로 32가 적용되어 있어서, container 에서 32만큼 떨어진 위치부터 시작해서

   아래의 아이템에 overlap 되서 보이지 않았던것이었다.

 

   를 추가하면 일반적인 드롭다운을 기대하는 사람들이 원하는 드롭다운이 된다. 아마 기본 오프셋이 32로 적용되있는     이유는 , 이 드롭다운 라이브러리는 기본적으로 드롭다운 기준이 첫 번째 아이템부터 시작하는 것이 아니기 때문인 것 같다.

 

 

2. 드롭다운이 라벨이 기준이 아니라 라벨 보다 하나 위의 아이템에서 시작함

    를 추가해준다. 이것은 드롭다운이 expand 되는 기준점이 첫 번째 아이템이라는 의미이다.

     https://github.com/n4kz/react-native-material-dropdown/issues/14

Disable dynamic position option? · Issue #14 · n4kz/react-native-material-dropdown

 를 참조해서 솔브했다.

마무리 작업을 해야하지만 완벽히 원하는 결과를 얻었다.