inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

[5-5] 상세스크린 구현하기

KeyboardAwareScrollView가 android emulator에서 잘 동작하지 않습니다.

해결된 질문

164

유정민

작성한 질문수 1

0

https://github.com/znehraks/react-native-basic/blob/main/app/post/%5Bid%5D.tsx
이 코드인데, Android Emulator에서
KeyboardAwareScrollView가 정상동작하지 않습니다.

import AuthRoute from '@/components/AuthRoute';
import FeedItem from '@/components/FeedItem';
import InputField from '@/components/InputField';
import { colors } from '@/constants';
import useGetPost from '@/hooks/queries/useGetPost';
import { useLocalSearchParams } from 'expo-router';
import { Pressable, SafeAreaView, ScrollView, StyleSheet, Text, View } from 'react-native';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';

export default function PostDetailScreen() {
  const { id } = useLocalSearchParams();
  const { data: post, isPending, isError } = useGetPost(Number(id));

  if (isPending || isError) {
    return <></>;
  }

  return (
    <AuthRoute>
      <SafeAreaView style={styles.container}>
        <KeyboardAwareScrollView contentContainerStyle={styles.awareScrollViewContainer}>
          <ScrollView contentContainerStyle={styles.scrollViewContainer}>
            <View style={{ marginTop: 12 }}>
              <FeedItem post={post} isDetail />
              <Text style={styles.commentCount}>댓글 {post.commentCount}개</Text>
            </View>
          </ScrollView>

          <View style={styles.commentInputContainer}>
            <InputField
              rightChild={
                <Pressable style={styles.inputButtonContainer}>
                  <Text style={styles.inputButtonText}>등록</Text>
                </Pressable>
              }
            />
          </View>
        </KeyboardAwareScrollView>
      </SafeAreaView>
    </AuthRoute>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: colors.WHITE,
  },
  awareScrollViewContainer: {
    flex: 1,
    backgroundColor: colors.GRAY_200,
  },
  scrollViewContainer: {
    backgroundColor: colors.GRAY_200,
  },
  commentCount: {
    marginTop: 12,
    backgroundColor: colors.WHITE,
    paddingVertical: 12,
    paddingHorizontal: 16,
    fontSize: 16,
    fontWeight: 'bold',
  },
  commentInputContainer: {
    width: '100%',
    borderTopColor: colors.GRAY_200,
    borderTopWidth: StyleSheet.hairlineWidth,
    backgroundColor: colors.WHITE,
    padding: 16,
    bottom: 0,
    position: 'absolute',
  },
  inputButtonContainer: {
    backgroundColor: colors.ORANGE_600,
    padding: 8,
    borderRadius: 5,
  },
  inputButtonText: {
    color: colors.WHITE,
    fontWeight: 'bold',
  },
});

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

답변 2

1

Kyo

잘 동작하지않는것이 어떻게 동작한다는 말씀이실까요??

0

유정민

image.png


같은 상황에서 안드로이드 에뮬레이터에서는 키보드에 InpufField가 여전히 가려진 채로 있습니다.

0

Kyo

그건조금 이상하네요. 앱을 다시빌드해도 마찬가지인가요?

혹시 실기기로는 테스트 해보셨나요?

0

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. 유정민님.

KeyboardAwareScrollView가 Android Emulator에서 정상 동작하지 않는 문제는 다양한 원인이 있을 수 있습니다. KeyboardAwareScrollView는 키보드가 화면에 표시될 때 자동으로 스크롤뷰를 조정해주는 기능을 제공합니다. 하지만 Android 환경에서는 특정 조건에서 제대로 작동하지 않을 수 있습니다.

가능한 문제 원인과 해결 방법

  1. KeyboardAwareScrollView의 래핑 위치:

    • 현재 KeyboardAwareScrollViewScrollView를 감싸고 있습니다. KeyboardAwareScrollView의 감싸고 있는 위치가 올바르지 않으면 의도대로 스크롤이 동작하지 않을 수 있습니다. 최상위 View 레벨에 배치하여 작동 여부를 확인해 보세요.
  2. 중복 ScrollView 구성:

    • ScrollViewKeyboardAwareScrollView 내부에 중복해서 사용하게 되면 충돌이 일어날 수 있습니다. 두 구성 요소가 서로 영향을 미치지 않도록 KeyboardAwareScrollView만을 사용하는 것을 추천합니다.
  3. 키보드 익숙치 않은 동작 설정 확인:

    • 자주 android:windowSoftInputMode 설정에서 문제가 발생합니다. AndroidManifest.xml에서 관련 설정을 검토하여 앱의 키보드 동작이 적절히 설정되어 있는지 확인하셔야 합니다. 일반적으로 adjustPan이나 adjustResize가 사용됩니다.
  4. emulator의 해상도 및 재시작:

    • 에뮬레이터의 해상도가 실제 동작과 다를 수 있습니다. 설정을 변경하거나, 에뮬레이터를 재시작하는 것도 해결책이 될 수 있습니다.

참고 링크

  • Keyboard Handling in React Native: 다양한 키보드 핸들링 관련 정보와, 유사한 문제에 대한 다른 해결책을 찾아볼 수 있습니다.
  • React Native Community: 프로젝트의 공식 GitHub 페이지를 통해 관련 이슈 및 문제 해결 방법을 논의할 수도 있습니다.

이 안내가 문제 해결에 도움이 되기를 바랍니다. 추가적인 질문이 있거나 문제가 계속 발생한다면 더 많은 정보를 제공해주시면 추가 도움을 드릴 수 있습니다.

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

secureTextEntry 설정에 관해

0

57

2

expo 55 tabs 사라짐 이슈

0

80

2

백엔드도 궁금합니다!

1

85

1

댓글 버튼 하단에 고정되지 않는 이슈

0

53

1

SafeAreaView 적용 기준 문의

0

80

2

스크린 옵션 아이콘

0

55

2

[Note] 안드로이드 네비게이션 헤더 이슈 안내

0

65

2

ActionSheet

0

85

1

안드로이드 폰과 PC에서 테스트할때 화면 안보임과 오류 문의

0

99

1

iOS 빌드 후 실기기에서 앱 시작

1

70

1

[5-2] 글 목록 무한스크롤 구현하기 with InfiniteQuery 10:40/ useScrollTop(ref) 사용관련

0

83

2

클라이언트 사이드에서 세션 관련 질문

0

81

2

Android 에뮬레이터 환경설정 및 실행 (for Mac) 에러 문의

0

111

1

[5-13] useLikePost 쿼리 구현 중 Tanstack Query 관련 질문

0

63

1

Expo 54 버전 ios에서 headerLeft

1

139

2

어플 개발 후 배포 시에 주의할 사항이 있을까요?

0

78

1

코드 수정 시 ios 시뮬레이터에서 자동반영이 안 되는데 왜그럴까요?

0

91

1

텍스트가 다 상단위로 올라가있는데 어떻게 해야할까요?

0

78

2

Axios Network error...

0

151

2

강의는 52버전인데 expo가 현재 54버전이에요

0

307

1

[TIP] SafeAreaView 사용할 때마다 자꾸 ios에서 위아래가 빵꾸 나시는 분들 필독

0

234

2

키보드 이슈 관련 해결 질문

0

74

1

android header를 ios처럼 바꾸기

0

68

1

CustomButton 코드 버튼 관련 질문

0

66

1