Grace
grace's dev_note
Grace
전체 방문자
오늘
어제
  • 분류 전체보기
    • FrontEnd
      • Next.js
      • React
      • ReactNativ..
      • Vue
    • Javascript
      • 러닝 자바스크립트
      • 모던 자바스크립트
    • CS
    • DataScienc..
      • Data Struc..
      • LeetCode
    • BackEnd
      • Express
      • Node.js
      • Nest.js
    • DevOps
      • Docker
    • 매일메일
    • 회고
    • 코드캠프

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 자바스크립트
  • Vue.js
  • postgres
  • Vue
  • vitejs
  • backend
  • pinia
  • 알고리즘
  • PostgreSQL
  • javascript
  • tanstack
  • Express
  • Vue3
  • vue-query
  • Vite
  • React Native
  • 번들러
  • 함수
  • node.js
  • nest.js

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
Grace

grace's dev_note

FrontEnd/ReactNative

React Native 키보드로 세로길이가 바뀌는것을 막고싶어요!

2022. 10. 26. 17:26

mobile에서는 키보드를 화면에서 사용한다. 키보드가 팝업 될때 ios는 괜찮지만 android는 키보드의 세로 높이에 맞춰서 세로 화면의 길이가 달라진다. 그로 인해 애써 만들어놓은 디자인이 망가지고 하는경우가 있다. 그 문제 점을 해결하는방법은 의외로 간단하다.

code change

우선 react-native project 안에서 android 폴더로 들어간다. 그곳에는 java로 작성된 안드로이드 네이티브 언어가 들어가 있다.

다음의 path로 이동!

./android/app/src/main/AndroidManifest.xml

다음 파일을 실행하면 xml로 작성된 코드가 보일 것이다.

android:windowSoftInputMode="adjustResize"

그 안에서 activity 섹션에서 위의 부분이 보일 것이다. 위의 코드를 다음과 같이 고쳐주자.

android:windowSoftInputMode="adjustPan"

위와 같이 고치고 나면 키보드가 팝업되어도 화면의 높이는 고정된채 input target에만 키보드가 위치하게 되어 디자인이 망가지는 일이 없어진다.

저작자표시 비영리 변경금지 (새창열림)

'FrontEnd > ReactNative' 카테고리의 다른 글

[ReactNative-Debugging] The linked library 'libPods-xxx.a' is missing one or more architectures required by this target: arm64.  (0) 2022.11.15
XCode Simulator를 변경하고 싶어요  (0) 2022.11.01
React Navigation Tab Navigator를 사용하고 싶어요  (0) 2022.10.26
앱에서는 브라우저 저장소를 어떻게 사용하나요? React Native로 개발하는 방법! Async-Storage, Debugging Tool  (0) 2022.10.26
React Native에서는 어떻게 페이지 이동을 하나요? React Navigation이 있어요!  (0) 2022.10.26
    'FrontEnd/ReactNative' 카테고리의 다른 글
    • [ReactNative-Debugging] The linked library 'libPods-xxx.a' is missing one or more architectures required by this target: arm64.
    • XCode Simulator를 변경하고 싶어요
    • React Navigation Tab Navigator를 사용하고 싶어요
    • 앱에서는 브라우저 저장소를 어떻게 사용하나요? React Native로 개발하는 방법! Async-Storage, Debugging Tool
    Grace
    Grace
    기술 및 회고 블로그

    티스토리툴바