Weather 실습에서 ImageBackround 자식들의 가운데 정렬

리액트 네이티브 2/E
#1

Weather%20%E1%84%89%E1%85%B5%E1%86%AF%E1%84%89%E1%85%B3%E1%86%B82
Weather%20%E1%84%89%E1%85%B5%E1%86%AF%E1%84%89%E1%85%B3%E1%86%B82836×805 216 KB

Weather 실습에서 ImageBackGround를 넣었더니 Text박스가운데 정렬이 안먹는데, 정렬을 맞춰줄려면 어떻게 해야될까요?

Weather%20code
Weather%20code945×412 43.4 KB

========================== css 코드============================

const styles = StyleSheet.create({
    container : {
        flex : 1,
        alignItems : 'center',
        paddingTop: 30,
        backgroundColor : "#666666"
    },
    backdrop : { flex : 1, flexDirection: 'column', width: '100%', height: '100%'},
    welcome : { fontSize : 20, textAlign : "center",margin: 10},
    input : {
        fontSize : 20, 
        borderWidth: 2,
        padding: 2,
        height: 40,
        width : 199,
        textAlign : "center"
    }

})
리액트 네이티브 2/E 1주차 강의자료
#2

@falhed7418 첫 질문이네요! :+1: :pray:

안내

질문은 댓글보다는 개별 주제(topic)로 작성해주세요. 다른 사람들이 나중에 검색을 할 때도 그렇고 개별 글로 올려야 답변이 달리지 않은 글을 제가 손쉽게 확인할 수 있으니 부탁드립니다. :grin:

그리고 남겨주신 코드 부분은 마크다운 코드 영역으로 바꿔서 보기 편하게 수정했습니다. 코드 코드 첫줄 이전줄에 그리고 코드 마지막줄 다음줄에 ``` 을 입력하시면 됩니다.

답변

    backdrop : { flex : 1, flexDirection: 'column', width: '100%', height: '100%'},

이건 4장 스타일과 과련된 부분이네요. flex 레이아웃과 관련되어 있습니다. backdrop에 flexDirection: column을 주었기에 자식들을 세로로 배치하게 되고 이와 직교하는 축(여기서는 가로 방향)에서의 정렬은 alignItems 속성으로 조정하면 됩니다.

아래 처럼 지정하면 원하시는 모습으로 나올 거에요.

    backdrop : { flex : 1, flexDirection: 'column', width: '100%', height: '100%', alignItems: 'center'},
#3

답변 감사합니다. ^^ 개별 주제로 쓸까 댓글로 쓸까 고민했었는데 개별 주제로 쓸껄그랬네요. ㅎㅎㅎ
옮길수 있으면 옮기는게 좋겠네요

좋아요 1
#4

제가 옮겼습니다. :slight_smile:

좋아요 1