앱개발 3주차_01

앱개발 3주차를 시작하겠습니다.

3주차에서는 리액트에 대해서 배울 것입니다.

• '리액트 네이티브'는 리액트 기반 기술 위에서 만들어진 앱개발 기술이기 때문에 리액트 기술을 안다면 더 풍부한 기능과 구현을 할 수 있게 됩니다.
• 오늘 배울 것 중 가장 중요한 부분은 '페이지 기능' 입니다.
  페이지 기능은 다른 페이지로 넘어가는 방법입니다.

나만의 꿀팁 앱 상세 화면 만들기

😏 오류났던 부분 정리(익숙해지기)

• import 부분 오타 없나 확인하기
  import {View,Text,StyleSheet,Image} from 'react-native'

• 사용할 태그가 import 되었는지 확인하기

  • image태그 사용하기 전에 import를 시키지 않아서 계속 오류

• return()에는 화면에 그릴 것 넣어주기, 변수 정의는 화면 상 그리는 것이 아니니 return() 위에 선언하도록!

• 변수 선언 후 변수 안에 값을 불러올 때엔 {} 사용하기(2주차에서 정리했던 내용: 자바스크립트문법을 사용할 땐 {}으로 감싸줘야 한다.)
  <Text>{tip.title}</Text>
  tip.title로 썼더니 화면에 텍스트로 나타났음.

• style tip

  • 버튼 테두리 만들기

  borderColor:"#FF007F", //테두리 색상
   borderWidth:1 //테두리 두께 설정해주기

🤗 문제풀이 꿀Tip

• 내용이 들어갈 화면은 ScrollView로 감싸기
  : 내용이 길어질 수도 있으니 스크롤뷰를 사용하기

• style이름 먼저 정해주기

  • container, title, desc, button, buttonText 등

• 안에서 자바스크립트 변수를 쓰려고 할 때는 {}를 사용하기

• 외부에서 이미지를 불러올 때는 {uri: } 사용하기

• 이미지는 본인의 영역이 있어야지 화면에 나타난다.

• 가운데 정렬 하는 방법

  • justifyContent:"center", alignItems:"center"