프로젝트
-
[todo_app_3] ui- 기본, 입력칸프로젝트/[react]todo_app 2018. 5. 12. 14:29
기본적인 ui 작업import React from 'react';import { StyleSheet, Text, View, StatusBar, TextInput, Dimensions, Platform } from 'react-native'; const { height, width } = Dimensions.get("window"); {/*윈도우 크기 알아내서 저장*/} export default class App extends React.Component { render() { return ( {/*상단의 status bar 변경*/} Cute To Do ); }} const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#F2..
-
[todo_app_2] 프로젝트 세팅프로젝트/[react]todo_app 2018. 5. 8. 22:33
세팅expo에서 프로젝트 생성github에 repository생성 git remote add origin urlgit pull origin mastergit add .git commit -m "some messages"git push origin master app.json 변경{ "expo": { "name": "cute todo", "description": "cute todo app made by react", "slug": "cuteTodo", 앱 이름, 설명 쓰기 slug 가 expo 프로젝트 이름 따라서 cute-todo 이렇게 되어있었는데나중에 오류난다... '-' 이거 빼야함 README.md 변경# cute-todocute todo app made with react native GitH..
-
[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..