윈도우 환경입니다.

아바타 커뮤니티앱 만들기 (React Native Expo)

[5-1] 글 작성 기능 연동 + 키보드 이슈 대응하기

작성

import DescriptionInput from "@/components/DescriptionInput";
import TitleInput from "@/components/TitleInput";
import { FormProvider, useForm } from "react-hook-form";
import { StyleSheet } from "react-native";
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
type FormValues = {
  title: string;
  description: string;
};

export default function PostWriteScreen() {
  const postForm = useForm<FormValues>({
    defaultValues: {
      title: "",
      description: "",
    },
  });
  return (
    <FormProvider {...postForm}>
      <KeyboardAwareScrollView contentContainerStyle={styles.container}>
        <TitleInput />
        <DescriptionInput />
        <DescriptionInput />
        <DescriptionInput />
        <DescriptionInput />
        <DescriptionInput />
        <DescriptionInput />
        <DescriptionInput />
      </KeyboardAwareScrollView>
    </FormProvider>
  );
}

const styles = StyleSheet.create({
  container: { margin: 16, gap: 16 },
});

KeyboardAwareScrollView를 써도 여전히 키보드가 입력창을 가리는데 이유가 뭔지 잘 모르겠습니다.

react-native typescript expo react-hook-form react-query

답변 3

Kyo

지식공유자

최근 버전 안드로이드에서 KeyboardAwareScrollView를 사용했을때 입력창을 가리는 이슈가 발생하고 있네요.
라이브러리 사용없이 문제를 해결하는 키보드관련 수업을 추가로 제작하여 섹션(피드)6에

~~업로드하겠습니다~~ 업로드하였습니다!

eggmun(문성진)

사용 중인 targetSdkVersion, compileSdkVersion, 그리고 앱 실행 기기의 Android OS 버전(API Level) 알려주실 수 있을까요?

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. 성혜람님.

KeyboardAwareScrollView를 사용하더라도 여전히 키보드가 입력창을 가리는 문제가 발생할 수 있는 몇 가지 원인과 해결 방법을 설명해 드리겠습니다.

문제의 원인

KeyboardAwareScrollView의 설정 문제: 컴포넌트의 속성이 올바르게 설정되지 않았을 경우, 키보드가 여전히 입력창을 가릴 수 있습니다.
윈도우 환경의 제한: 윈도우 플랫폼에서 React Native가 일부 컴포넌트를 제대로 지원하지 않을 수 있습니다.
중첩된 컴포넌트 구조: 여러 개의 입력 컴포넌트를 중첩시켜 사용할 경우 스크롤 뷰의 내부 동작이 제대로 작동하지 않을 수 있습니다.

해결 방법

KeyboardAwareScrollView 속성 확인: 여러 속성을 조정하여 구성 요소가 의도한 대로 작동하도록 해야 합니다. 예를 들어 extraScrollHeight, enableOnAndroid 등의 속성을 조정하는 방법도 고려해 보세요.
평가 본 컴포넌트 재구성: 여러 개의 DescriptionInput 컴포넌트가 연속적으로 사용되고 있는데, 한번에 너무 많은 입력 컴포넌트를 구성하는 것을 피하고 최소한의 필드만 사용해 보십시오. 예를 들어, 반복되는 DescriptionInput을 줄이고 필요한 필드로 구조를 간소화하는 방법입니다.
윈도우 환경 특성 확인: 윈도우 환경에 대한 공식 문서나 커뮤니티의 지원 정보를 참고하여 윈도우 환경의 특수성을 파악하면 좋습니다. React Native Windows의 공식 문서도 도움이 될 수 있습니다.

참고사항

이와 관련하여 공식 문서나 커뮤니티의 자원을 활용하여 보다 구체적인 해결책을 찾아보는 것도 좋은 방법입니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변