이상한 문제가 생겼다..
위와 같은 페이지에서 인풋창을 누르고 텍스트를 입력한 후 ... 엔터를 누르면...
이렇게 인풋 영역이 자리를 이상하게 잡는다...
<PageWrapStyle>
<KeyboardAwareScrollView>
<FormBoxComponent
title="프로젝트 이름"
placeholder="프로젝트 이름"
values={formik.values.projectName}
handleChange={formik.handleChange('projectName')}
/>
<FormBoxComponent
title="프로젝트 설명"
placeholder="프로젝트 설명"
blurOnSubmit={true}
multiline={true}
values={formik.values.projectDescription}
handleChange={formik.handleChange('projectDescription')}
/>
<FormBoxStyle>
<InputTitleStyle>기술스택</InputTitleStyle>
<TagListComponent tagList={tagList} setTagList={setTagList} />
</FormBoxStyle>
{/** 생략.... **/}
</KeyboardAwareScrollView>
</PageWrapStyle>코드에 KeyboardAwareScrollView를 감싸줬는데 KeyboardAwareScrollView 이게 있으면 자리를 못잡고 없으면 자리를 잡는다. KeyboardAwareScrollView의 문제라고 생각하고 구글링을 해보아도 비슷한 이슈를 찾을수가 없었다.. 그래서 초점을 css로 옮겼다. 혹시 css의 문제로 영역이 이상하게 잡히는건가싶어 각 영역에 색깔을 줘보았다.
현재 폼타이틀과 입력폼을 아래와같이 묶어주었는데 해당 영역이 자리를 못잡는다고 파악하여 css를 살펴보았다.
<FormBoxStyle>
<InputTitleStyle>기술스택</InputTitleStyle>
<TagListComponent tagList={tagList} setTagList={setTagList} />
</FormBoxStyle>TIL이지만 지난번에 버튼이 항상 아래에 위치하고 싶을경우에 하단 고정 버튼과 컨텐츠 영역을 분리하고 최상위객체(PageWrap)에 flex:1을 주었을때 높이값이 꽉찾던 기억이 나서..
한번 flex:1을 넣어보았더니..! 자리를 제대로 잡는다..!
input이 가로로 정렬될때만 flex:1을 주는것이 좋은것 같다.. 그래서 나는 가로 정렬일때만 input에 row props를 받아 flex:1을 걸어주었다..!
export const InputTextStyle = styled.TextInput`
${props => props.row && 'flex:1'};
padding: 15px;
min-height: 50px;
background: #fff;
color: #0b132b;
border-radius: 10px;
`;흠.. flex:1에 대해 알아봐야겠다. 어떤 이유로 영역을 제대로 잡는건지 궁금하다..!
참고글을 읽어보니,
.flex-item {
flex: 1;
/* flex: 1 1 0 */
}위와같이 flex:1과 flex: 1 1 0은 같은 표현이고,
flex: 1 1 0은 flex-grow: 1 속성과 flex-shrink: 1 속성, flex-basis: 0 속성을 줄인 표현이라고 나와있다.
flex-grow
- 속성값이1 이상이면 flex item의 원래 크기에 상관없이 flex container를 채우도록 flex item의 크기가 커진다.
flex-shrink
- 속성값이1 이상이면 flex container의 크기가 flex item의 크기보다 작아질 때 flex item의 크기가 flex container의 크기에 맞추어 줄어든다.
flex-basis- flex item의 기본 크기를 결정하는 속성이다. 기본값은 auto다.
- width 속성에서 사용하는 모든 단위(px, %, em, rem 등)를 속성값에 사용할 수 있다.
- flex-basis 속성의 값을 30px이나 30%와 같이 설정하면 flex item의 크기가 고정된다.
- flex-basis 속성의 값을 0으로 설정하면 flex item은 절대적 flex item(absolute flex item)이 되어 flex container를 기준으로 크기가 결정된다.
flex:1 요약
flex-grow 속성과 flex-shrink 속성, flex-basis 속성을 축약해서 flex 속성으로 표현할 때 flex: 1 속성은 flex: 1 1 0 속성을 의미한다. 즉, flex-grow 속성의 값이 '1'이고 flex-shrink 속성의 값이 '1'이기 때문에 flex container의 크기에 따라 flex item의 크기도 커지거나 작아진다는 의미다.
참고블로그
