레이아웃

이 안에 들어가는 휴대폰 번호, 통신사와 같은 요소들을 배치하는 방법에 대해서 설명해주셨다.
https://www.youtube.com/watch?v=XqMhDBmAME8

전에 만든 height가 50%인 레이아웃의 가운데 부분에 요소들이 들어가야 하기 때문에 이 부분에 View를 넣었다. 강의하시는분이 화면의 전체에서 저 휴대폰번호 영역이 차지하는 부분이 12.5%정도 되면 좋겠다고 하셨다. 레이아웃의 가운데 View에 새로운 View를 넣는거기 때문에 height를 전체 레이아웃 기준이 아닌 가운데 View를 기준으로 분배해야한다!
그러니 새로운 View의 height에는 12.5%가 아닌 20%정도로 작성해야한다.

각 요소들 사이에 공백도 있으니 marginTop을 5%정도 넣어준다.

그리고 신기했던게 위에서 작성한 View를 4번정도 반복해야했는데, 저 코드를 4번 붙여넣는게 아닌, const로 새롭게 변수를 만들어서 그 변수를 작성하셨다.

const MiddleView = () => (
        <View
            style={{
                width: '100%',
                height: '20%',
                backgroundColor: 'red',
                marginTop: '5%',
            }}>
        </View>
    )

결과는 이렇게!

여기에 텍스트랑 텍스트인풋까지 넣고 색을 다 지워주면 다음과 같이 나온다.

근데 텍스트 인풋 눌러서 키보드 올라오면 텍스트 인풋이.. 위로 올라가서 잘린다 ㅜㅜ 나중에 해결해주시겠지?! 끝쪽에도 안되면 다시 해봐야겠다!

정리

반복되는 부분이 있을 때는 const로 변수를 선언하여 따로 빼서 작성하면 좋다!