React Native
-
[todo_app_12] 할일 update, 실제 디스크에 저장프로젝트/[react]todo_app 2018. 6. 1. 11:51
업데이트 함수 _updateToDo = (id, text) => { this.setState(prevState => { const newState = { ...prevState, toDos: { ...prevState.toDos, [id]: { ...prevState.toDos[id], text: text } } }; this._saveToDos(newState.toDos); return { ...newState }; }); }; 저장하기_saveToDos = newToDos => { const saveToDos = AsyncStorage.setItem("toDos", JSON.stringify(newToDos)); }; 저장한 정보를 로드하기 _loadToDos = async () => { try { ..
-
[todo_app_11] 완성, 미완성 할일프로젝트/[react]todo_app 2018. 6. 1. 11:51
완성된 할일, 미완성된 할일을 구분하자 _uncompleteToDo = id => { this.setState(prevState => { const newState = { ...prevState, toDos: { ...prevState.toDos, [id]: { ...prevState.toDos[id], isCompleted: false } } }; this._saveToDos(newState.toDos); return { ...newState }; }); }; _completeToDo = id => { this.setState(prevState => { const newState = { ...prevState, toDos: { ...prevState.toDos, [id]: { ...prevState.t..
-
[todo_app_7] todo목록 수정프로젝트/[react]todo_app 2018. 5. 20. 21:37
app.js에서 todo목록을 관리, 컨트롤 하고 있다todo.js에서 수정할 때, app.js에서 props를 받아오고 싶음 => 그래야수정할때 자연스럽게 연출됨 수정할 때 텍스트인풋이 떠야하고, 그 안에 value가 있어야함. todo.js const { text } = this.props; { isEditing ? : ( { text } )} app.js ) 편집을 했을 때, 해당 텍스트를 복사해서 state에 보내기todo.jsstate = { toDoValue: ' ' }; 편집중일때는 textinput, 아닐때는 text{ isEditing ? : ( { text } )} 스타일 지정 input: { marginVertical: 15, width: width/2, paddingBottom: 5..
-
[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..