TIL #24 React Native -2

 ⭐️ button text height 문제 

TouchableOpacity 태그를 이용해 버튼을 만드는 과정에서 flex-direction이 column일 경우에는 문제가 없었지만,

row일 경우에 버튼 내부의 텍스트의 height 값이 멋대로 늘어나는 현상을 발견했다.

 

row

column

왜지... 🙄

따로 스타일을 지정해 준 것도 없었고 TouchableOpacity 태그 내에 바로 Text태그를 사용했기에

따로 Text를 감싸고 있는 View도 존재하지 않았다.  

 

그래서 이것저것 시도해 본 결과...!

button(TouchableOpacity) 태그의 스타일에 alignItems: center 속성 값을 적용하면 알 수 없는 height값이 사라진다. 

(따로 높이에 관한 값이 없었기에 가장 가까운 부모 태그의 높이 값을 따라간 것 같다.)

---

 ⭐️ SafeAreaView 태그

 프로젝트 진행 중, 안드로이드에서 만든 화면이 ios에서는 상단의 노치부터 시작되어서

상단 컨텐츠가 가려지는 현상을 발견했다.  😱

 

이러한 경우를 위해서 react native에서는 코어 컴포넌트로 SafeAreaView라는 태그를 제공하고 있다.

 

SafeAreaView노치와 상태바, 홈버튼의 영역을 제외한 화면의 영역을 가리키는 태그로  ios에서만 적용된다. 

 

SafeAreaView 태그 적용 시 노치 아래부터 화면이 적용되는 것을 확인할 수 있었다.

(SafeAreaView 태그는 안드로이드에서 아무런 영향을 미치지 않기 때문에 따로 예외처리를 해주지 않아도 된다.)

---

 ⭐️ fetch 함수 사용시 

fetch 함수를 사용하여 목데이터를 받아올 때 ios에서 문제없이 진행되던 코드가 안드로이드에서는

'network request failed' 에러를 일으켰다. 

 

구선생의 도움을 받아 찾아보니 안드로이드에서 fetch 함수 사용 시 주소의 localhost 부분에 실제 자신의 ip 주소를 이용해야 

정상적으로 요청이 전달되는 것을 알게 되었다.

 

ttdoongdoong.tistory.com/13

React-native fetch할때 network request failed 오류!

---

라이브러리 관련

🧭 react-navigation

 

 ⭐️ navigation 헤더의 경계선을 지우고 싶을 때

헤더의 선은 default로 border가 아니라 shadow로 적용이 되어있다.

 

그렇기 때문에 headerStyle 옵션에서 shadowOpacity:0 값을 적용해 주면 경계선을 지울 수 있다.

(비단 navigation 라이브러리뿐만 아니라 안드로이드에서 shadow 관련 속성은 모두 elevation 속성명으로 통합되어 있다.

ex) elevation : 0 )

 

 ⭐️ ios back button title

android에서는 이러한 현상이 없었지만 ios에서는 내비게이션 헤더에 뒤로 가기 버튼에 대해

headerBackImage 속성을 지정해 주어도 뒤로가기 버튼 옆에 'back'이라는 글자가 계속 붙어서 나온다.

 

react-navigation v5에서는 이 경우 'headerBackTitleVisible :  false' 속성값을 이용해 글자를 보이지 않게 할 수 있다.

 

stackoverflow.com/questions/46864951/how-to-change-the-back-button-label-react-navigation

How to change the back button label, react-navigation

 

 ⭐️ header의 버튼을 통해 다른 page로 이동

헤더의 버튼을 통해 다른 페이지로의 이동이 필요한 경우 headerRight 속성에 버튼 역할을 하는 컴포넌트를 반환해 줄 수 있다.

 

위의 예와는 다르게 미리 컴포넌트를 선언 후 import 하는 방식으로 사용할 수도 있다.

 

 

⭐️ tabNavigation에서 tab 클릭 시 스타일 적용

tab navigation에서 탭이 클릭될 경우의 스타일을 적용하려 했는데 라이브러리에서 기본적으로 제공해 주는 커스텀 가능 항목은 너무 한정적이었다.  

 

그래서 navigator의 focus값(boolean)을 통해 커스터마이징해 주었다. 

 

---

🗂 react-native-dropdown-picker

사용한 버전은 4.0.9 으로 현재 최신 버전은 5.0.0이고
홈페이지에 이전 버전은 deprecated 되었으며 최신 버전과 호환되지 않는다고 나와있다.

 

dropdown picker를 사용하면서 가장 어이없는 상황중 하나는 z-index 문제일 것이라고 생각한다. 

아무런 설정도 하지 않았는데 라이브러리를 사용하면 dropdown의 아이템들이 다른 요소의 뒤로 가려져서 보이지 않는 상황이 발생한다.

 

첫 번째는 dropdown의 아이템이 다른 요소의 뒤에 가리는 경우이다.

이 경우는 dropdown태그의 부모 태그에 z-index를 높여주니 해결되었다. 

 

github.com/hossein-zare/react-native-dropdown-picker/issues/134#issuecomment-803551754

Problem with the zIndex where my picker goes under below Views · Issue #134 · hossein-zare/react-native-dropdown-picker

 

두 번째는 설문조사처럼 여러 dropdow이 필요한데 하나의 dropdown의 아이템이 다른 dropdown에 가려지는 경우이다.

이 경우는 dropdown태그의 z-index를 위에서 아래로 줄여주었다.

 

github.com/hossein-zare/react-native-dropdown-picker/issues/252

Dropdowns are overlapping and can only be pressed in margins between items · Issue #252 · hossein-zare/react-native-dropdown-p

---