앱개발 학습. 메인화면 꾸미기

 

//앱개발 학습 - 2주차(스파르타코딩클럽)

메인화면 구성 가이드

1. 상단에 '나만의 꿀팁' 제목 텍스트를 넣어야 겠다
2. 제목 바로 밑에 이미지를 해당 이미지를 넣어야 겠다(이미지 제공 해드립니다 🙂)
3. 가운데 버튼은 횡(수평) 스크롤(ScrollView) 기능을 써서 좌우로 스크롤 가능하게 만들어야 겠다
4. ScrollVoew 수직 스크롤은 그냥 쓰면 된다는 것을 알았지만 횡은 어떻게 해야할까? 공식문서를 찾아봐야지, 수평은 영어로 Horizontal
5. 주어진 데이터는 문자이므로 Text 태그에 넣어야 겠다.
6. 설명 글은 긴데 3줄이 넘어가면, 말 줄임표가 되네! Text 태그 속성에 이런 기능이 있는지 공식문서에서 찾아봐야겠다.
7. 피자 이미지와 글자 부분의 영역을 대~충 1 : 3정도로 분할하면 되겠네

기본 골격

import React from "react";
import {} from 'react-native';


export default function App() {
  return ()

}

const styles = StyleSheet.create({})

추가 학습 내용

1.이미지는 사이즈를 지정해줘야 화면에 나타난다.

2. marginTop 위쪽에 간격주기

3. alignSelf 자기자신의 정렬을 설정

4. borderBottomWidth 하단 선

내 코드

• 좀 더 깔끔하게 정리할 수 있는 방법이 있을 것 같은데 아직 잘모르겠다.
• 일단 화면은 나왔으니 강사님의 내용과 비교해보자

https://github.com/wholedit/myhoneytip_ex/blob/685b4502d1ba9755f8899bd1fc40c8780bd3d76b/App.js

GitHub - wholedit/myhoneytip_ex