TIL #23 React Native - 1

프로젝트를 진행하면서 RN을 공부하다 보니 react와는 비슷하면서도 다른 부분이 많았다.

 

그래서 프로젝트를 진행하면서 알게된 정보들, (꼼수 혹은 노하우?)

이런 것들을 오늘부터 하루하루 정리해 보려고 한다.

---

 ⭐️ 텍스트 밑에 밑줄!

텍스트 밑에 밑줄이 보이게 하려면 textDecorationLine 속성에서 underline 값을 주면 된다.🙌

되나? ❓

 

textDecorationLine : underline

음 소문자 p가 줄을 넘는게 조금 보기 싫다!  😤

 

처음 든 생각은 해당 text를 View 태그로 감싸서 border를 bottom에만 주자! 였다.

결과는?!

 

🙄...?

 줄이 width 끝까지 뻗어 있다. 

물론 width 값을 지정해 주면 줄은 줄어들겠지만 텍스트의 값이 유동적으로 바뀌어야 하기 때문에

width 값을 그때그때 지정해 주어야 하는 문제가 있었다.

 

여러 방법을 찾아본 결과

 

텍스트를 감싸고 있는 View태그에 /alignSelf: 'flex-start' / 속성을 지정해 주면 해결된다! 

 😁😁😁😁😁 굳굳!

---

⭐️ 안드로이드 키보드가 레이아웃을 변경하는 경우 

 

ios에서는 이러한 문제가 없었지만 안드로이드에서 키보드가 나타날 때,

전체 레이아웃이 키보드 높이만큼 축소되는 현상이 있었다.

 

이 문제는 android 네이티브 설정을 변경해 주어야 했다. 

 

android 폴더의 app => src => main => res폴더 안의 AndroidManifest.xml 파일 내에서 

activity 태그 내의

android:windowSoftInputMode="adjustResize" 설정값을 android:windowSoftInputMode="adjustPan"

으로 변경해 준다. 

 

💪해결!

https://stackoverflow.com/questions/42840555/how-to-avoid-keyboard-pushing-layout-up-on-android-react-native

How to avoid keyboard pushing layout up on Android react-native

---