[2023-06-12] 키보드에 따라 사진이 같이 올라가는 문제 해결

이미지태거에서는 다음과 같이 화면에 이미지를 꽉 채워서 보여준다.

 

그런대 여기서 문제가 있다.

아래의 태그 추가 버튼을 눌러서 태그를 추가할 때, 사진이 키보드와 같이 올라가 버린다.

 

 

현재 구현되어있는 코드이다.

 

 

<>

      {showHeader && (

        <HeaderBar>

          <Header

            leftComponent={<BackBar color={'white'} />}

            backgroundColor="rgba(50,50,50,0.5)"

          />

        </HeaderBar>

      )}

      <ImageBox

        onPress={() => {

          setShowHeader(!showHeader);

        }}>

        <Image source={{uri: props.route.params.imageUrl}} />

      </ImageBox>

      {showHeader && (

        <TagBox>

          <Tags tags={tagListState} deleteTag={deleteTag} isDelete={isDelete} />

          <ButtonBox>

            <AddButton onPress={() => setIsDelete(!isDelete)}>

              <Icon

                type="entypo"

                name="minus"

                color={isDelete ? 'black' : 'white'}

              />

              <Text

                style={{

                  color: isDelete ? 'black' : 'white',

                  fontWeight: 'bold',

                }}>

                태그 삭제

              </Text>

            </AddButton>

            <AddButton

              onPress={() => {

                setVisible(true);

                setNewTag('');

              }}>

              <Icon type="entypo" name="plus" color="white" />

              <Text style={{color: 'white', fontWeight: 'bold'}}>

                태그 추가

              </Text>

            </AddButton>

          </ButtonBox>

        </TagBox>

      )}

      {/* 태그 추가 모달 */}

        ...

    </>

 

 

 

해결

이를 어떻게 해결할지 찾아보다가 ScrollView를 이용해서 간단하게 해결하는 방법을 찾았다.

어차피 컨텐츠가 화면보다 절대 커지지 않기 때문에 ScrollView를 적용해도 스크롤이 되지는 않는다.

 

아래와 같이 전체 코드를 ScrollView로 감쌌더니 사진이 같이 따라 올라가는 버그가 사라졌다.

 

<ScrollView>

      {showHeader && (

        <HeaderBar>

          <Header

            leftComponent={<BackBar color={'white'} />}

            backgroundColor="rgba(50,50,50,0.5)"

          />

        </HeaderBar>

      )}

      <ImageBox

        onPress={() => {

          setShowHeader(!showHeader);

        }}>

        <Image source={{uri: props.route.params.imageUrl}} />

      </ImageBox>

      {showHeader && (

        <TagBox>

          <Tags tags={tagListState} deleteTag={deleteTag} isDelete={isDelete} />

          <ButtonBox>

            <AddButton onPress={() => setIsDelete(!isDelete)}>

              <Icon

                type="entypo"

                name="minus"

                color={isDelete ? 'black' : 'white'}

              />

              <Text

                style={{

                  color: isDelete ? 'black' : 'white',

                  fontWeight: 'bold',

                }}>

                태그 삭제

              </Text>

            </AddButton>

            <AddButton

              onPress={() => {

                setVisible(true);

                setNewTag('');

              }}>

              <Icon type="entypo" name="plus" color="white" />

              <Text style={{color: 'white', fontWeight: 'bold'}}>

                태그 추가

              </Text>

            </AddButton>

          </ButtonBox>

        </TagBox>

      )}

      {/* 태그 추가 모달 */}

     ...

    </ScrollView>

 

 

 

아래는 전 후 비교 사진이다.

 

끝!