[2] React native 일정관리 앱, react-native-picker 사용

https://github.com/react-native-picker/picker 를 이용해 알림 시간 설정을 구현했는데

앱의 기본 백그라운드 색상이 어둡다 보니 문제가 발생되었다.

 

스타일 조정이 불가해 텍스트가 보이질 않는다

기본적으로 react-native-picker는 안드로이드에 modal, dropdown 두가지 방식을 지원하는데

피커 아이템 텍스트 컬러는 뒷 배경이 어둡기 때문에 밝은색으로 설정해 보이지가 않는 문제가 발생 함

 

또, 픽커 선택의 화살표 색상도 고정되어 있었으며 react-native-picker 에서는 별도의 arrow color 스타일 시트 조정 옵션을

제공하고 있지 않았다.

 

 IOS, ANDROID 두가지 앱의 통일성을 최대한 맞추기 위해 안드로이드만 별도 백그라운드 컬러를 넣는 방식은 적절하지 않아서

한참을 어떻게 할지 고민했음

 

안드로이드 스타일 파일을 직접 수정해 문제를 해결

네이티브에 대한 이해가 떨어지다보니 문제가 쉽게 해결이 되질 않았다.

검색 끝에 직접 안드로이드 스타일을 조정하는 방법을 선택함

드랍 다운 메뉴의 화살표 색상도 같이 조절하였다 (colorControlNomal)

 

이제 잘 보인다!