RN으로 만든 영단어 앱테크 어플 (출시 후 매일 100명씩 가입 중!)
캐시보카 - 돈버는 영단어 앱테크
단어를 맞추면 1캐시가 적립돼요. 적립된 캐시는 네이버 포인트로 전환할 수 있어요.
apps.apple.com
키보드가 올라올 때 버튼이나 텍스트도 같이 밀려 올라와야 할 떄도 있고, 화면이 움직이지 않고 고정되어야 할 때도 있습니다.
keyboardAvoidingView를 쓰지 않아도, 안드로이드 manifest의 " windowSoftInputMode " 속성을 이용해서 키보드가 올라올 때 화면을 고정시킬 수 있습니다.
우선 React Native 공식 문서의 TextInput 문서를 보겠습니다.
공식문서를 보면, 안드로이드일 경우 windowSoftInputMode의 파라미터값이 adjustResize일 때 텍스트인풋이 앱을 변화시킬 수 있다고 나와있습니다.
그리고 그 밑에 파란색 형광펜으로 해당 기능에 대한 안드로이드 공식 문서를 참조해주었습니다.
해당 링크를 누르면 manifest파일에 적용되는 태그들과 <activity> 태그에 적용되는 값들을 확인할 수 있습니다.
스크롤을 조금 내리면 windowSoftInputMode에 대한 파라미터들을 확인할 수 있습니다. 상당히 많네요.
굵은 글씨의 windowSoftInputMode를 눌러서 각 파라미터에 대한 설명을 볼 수 있습니다.
저희가 사용해야할 파라미터값은 "adjustNothing"인데, 이상하게도 공식 문서에는 적혀있지 않습니다.
가장 비슷한건 "adjustPan"이지만, 이 설정값은 키보드에 따라 '텍스트 인풋' 만 움직이도록 만들어줍니다. 텍스트 인풋이 아닌 다른 요소들은 고정되어있습니다. 그나마 비슷하지만, 저희가 원하는 것은 아닙니다.
어쩄든, 이제 공식 문서를 통해 windowSoftInputMode가 키보드와 화면에 영향을 준다는 것을 알았으니 코드에 적용시켜 보겠습니다.
1) 디렉토리로 찾아가기 귀찮으니, 사용중인 에디터에서 windowsoftinputmode를 검색하고 androidManifest.xml파일을 클릭합니다.
2) 그럼 acivity 태그 안의 windowSoftInputMode가 있고, 기본값으로 adjustResize로 설정되어 있습니다. 이 값을 adjustNothing으로 바꿔줍니다.
3) react-native run-android로 앱을 완전히 재설치해서 잘 작동하는지 확인합니다.
그럼 이제 안드로이드에서는 키보드가 올라와도 버튼이나 텍스트 등의 화면에 영향을 주지 않습니다.
만약 반드시 항상 키보드 위로 올라와야하는 버튼이 있다면 keyboardAvoidingView를 이용해서 따로 설정해주어야 합니다.
다음에는 keyboardAvoidingView에 대해 기록을 남겨보겠습니다.
RN으로 만든 영단어 앱테크 어플 (출시 후 매일 100명씩 가입 중!)
캐시보카 - 돈버는 영단어 앱테크
단어를 맞추면 1캐시가 적립돼요. 적립된 캐시는 네이버 포인트로 전환할 수 있어요.
apps.apple.com