React-Native로 날씨앱 만들기

hanjiyeon·2020년 10월 29일
0
post-thumbnail

🔗 https://github.com/hanjiyeon0/rn-weather-app

0. Introduction

expo

expo는 creat-react-app과 같음
따로 설정파일이 없음
모든 native파일을 숨겨줌
핸드폰에서 앱을 테스트할 수 있음
payment, printing 등 지원

react-native-cli

natvie 파일들을 더 많이 컨트롤하고싶을 때 이걸쓰면됨
node, watchman, react-native-cli 등 추가로 인스톨해줘야함

Setting up the development environment · React Native

ios 파일을 실행해줌

expo init [project-name]

blank(Typescript) or Tabs or bare-minimum : expo의 자동생성
스크린을 이미 가지고 있는 경우에 tab들을 가지게 될꺼고 그럴때 tabs를 선택
경험자의 경우에는 typescript 선택

모바일앱을 만드는 방법

fully native

  • swift 나 objecitve-c로 ios 만드는것, java 나 코틀린으로 안드로이드앱 만드는것
  • xcode, 안드로이드 스튜디오

하이브리드 웹뷰

  • 앱기반 웹뷰를 만드는것
  • 매우 간단한 어플을 만들때
  • cordova나 phonegap을 이용해서 html, css를 넣는것
  • 앱안에서 작동하는 웹
  • 이미 훌륭한 반응형 웬사이트를 가지고 있거나 native에 큰 예산이 없는 회사에서 이용

브릿지

javascript와 ios, android 사이를 연결하기 위해서 text, view와 같은 브릿지를 만듬
아이폰과 안드로이드의 core에 접근하기 위해서 항상 브릿지가 필요함
브릿지로 많은 데이터를 보내면 부하가 걸려서 느린 성능을 유발할 수 있음

컴포넌트

리액트 네이티브, 아이폰, 안드로이드 세상에서는 모든 것이 view임
view는 <div>같은 개념
view, text같은 룰이 있는 이유는 브릿지를 위해서

1. Logic

flex

react native에서 모든 flex box의 flex-direction default는 column(web은 row)
flex:1의 의미 : 모든 공간을 사용할 수 있음
flex컨테이너가 부모안에 여러개 있을 때는 flex의 비율에 따라 크기 배정
width, height 대신에 layout를 flex로 작업하는 것을 권장

get location

  1. native로 사용자의 location 가져오기

🚧 Geolocation · React Native

  1. expo로 사용자의 location 가져오기

할 수 있는 기능이 더 많음

Location

getLocation = async () => {
  try {
    await Location.requestPermissionsAsync();
    const location = await Location.getCurrentPositionAsync();
    console.log(location);
    //altitude, latitude, speed 등의 위치정보 나옴
  } catch (e) {
    Alert.alert("Can't find you.", "So sad");
  }
};

api

여기서 api 받아와서 사용

Weather API

api 호출할 때 axios 사용

2. Styles

api

units format - 화씨 대신 섭씨 사용 추가 &units=metric

status bar

아이폰 디바이스의 상태바에 접근
dark-content, white-content

0개의 댓글