프로젝트/[react]weather_app
-
[weather_app_6] 아이콘 변경, 앱 제작 완료프로젝트/[react]weather_app 2018. 5. 1. 16:13
이전 제작에 문제가 된 Mist, Haze 상태 추가 ionicon 대신 material community icons를 불러오자import { MaterialCommunityIcons } from "@expo/vector-icons"; 새로운 아이콘네임으로 변경const weatherCases = { Rain: { colors:["#00C6FB", "#005BEA"], title: "Raining", subtitle: "우산 챙기세요", icon: "weather-rainy" }, Clear: { colors:["#FEF253", "#FF7300"], title: "Sunny", subtitle: "날이 좋아요", icon: "weather-sunny" }, Thunderstorm: { colors:["..
-
[weather_app_5] api에서 정보를 가져와서 적용하기프로젝트/[react]weather_app 2018. 4. 29. 16:04
사용할 날씨 api => openWeatherMap https://openweathermap.org/api Current weather data 를 subscribe가입해야함. key를 얻자const API_KEY = "apiKey" api doc (https://openweathermap.org/current)By geographic coordinatesAPI call:api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon} _getWeather = (lat, lng) => { fetch(`http://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lng}&APPID=${API_KEY}`) .the..
-
[weather_app_4] 상태바/벡터아이콘/위치정보 에러처리프로젝트/[react]weather_app 2018. 4. 25. 17:12
상태바(status bar)없애기react-native가 제공하는 api 사용 import { StyleSheet, Text, View, Image, StatusBar } from "react-native"; render() { const { isLoaded } = this.state; return ( {isLoaded ? : ( Getting the weather )} ); } 아이콘expo의 패키지 vector-icon 사용하기 https://expo.github.io/vector-icons/ import { Ionicons } from "@expo/vector-icons"; 이런식으로 사용한다 name props에 사용하고 싶은 것을 집어넣자 리액트 네이티브에서 위치정보 얻기componentDidM..
-
[weather_app_3] weather view프로젝트/[react]weather_app 2018. 4. 19. 22:42
날씨를 표시하는 뷰를 만들자!weather.js 파일 생성import React, { Component } from "react";import { StyleSheet, Text, View } from "react-native";import { LinearGradient } from "expo"; //view인데 배경색이 gradient인것 export default class Weather extends Component { render() { return ( ); }} const styles = StyleSheet.create({ container: { flex: 1 }}); LinearGradient 스펠링 잘못써서 계속 오류났었다..ㅠㅠ App.js에 Weather컴포넌트를 import해준다.imp..
-
[weather_app_2] Loading View프로젝트/[react]weather_app 2018. 4. 16. 21:11
정보를 받았는지 확인하는 indicator가 필요하다. state = { isLoaded: false } 로딩이 완료되면 정보를 보여주고 , 로딩이 완료되지 않으면 로딩 스크린을 보여주자 render() { const { isLoaded } = this.state; return ( {isLoaded ? null : ( Getting the weather )} ); } 배경색과 텍스트 모양 const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff' }, loading:{ flex: 1, backgroundColor:'#FDF6AA', justifyContent: "flex-end", paddingLeft: 25 }, Lo..
-
[weather_app_1] react-native 와 expo프로젝트/[react]weather_app 2018. 4. 14. 19:01
날씨를 불러와 표시해주는 어플리케이션 제작 제목이 멋지지만 f word는 빼고 작업해야겠다..ㅎㅎㅎ react native, expo, node.js, npm 이 사용된다. react native네이티브 웹 어플리케이션을 빌드하게 도와주는 ui라이브러리jsx/javascript로 작성하고 컴파일링 할때 각각 ios(objective-c)/android(java) 네이티브 코드로 실행됨페이스북의 기술에 의하여 js-objective-c 의 브릿지 혹은 js-java가 연결됨 장점1. 자바스크립트를 활용할 수 있다는것2. 커뮤니티가 크다는것3. 많은 회사가 리액트 네이티브를 쓴다는것 (ex. 인스타그램,에어비앤비,페이스북,디스코드) expohttps://expo.io/tools리액트 네이티브로 앱을 만드는 ..