![]()
Introduction 프로젝트 생성 expo init (프로젝트명) --npm expo init WorkHardTravelHardApp --npm Touchables 헤더 만들기 import { StatusBar } from "expo-status-bar"; import { StyleSheet, Text, View, TouchableOpacity, } from "react-native"; import { theme } from "./colors"; export default function App() { return ( Work Travel ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: theme.bg, pa..
![]()
Icons 아이콘 사이트 접속 https://docs.expo.dev/guides/icons/ Icons Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React. docs.expo.dev - 위 사이트에 가서 사진의 저 링크 클릭 - 아이콘들이 엄청많이 뜨고 filter에서 fontisto 체크한다.(Fontisto 사용할거임) 날씨에 따른 아이콘 사용하기 import { Fontisto } from "@expo/vector-icons"; const icons = { Clouds: "cloudy", Clear: "day-sunny", Atmosp..
Weather 날씨 api 받아오기 https://openweathermap.org/api/ Weather API - OpenWeatherMap Please, sign up to use our fast and easy-to-work weather APIs. As a start to use OpenWeather products, we recommend our One Call API 3.0. For more functionality, please consider our products, which are included in professional collections. openweathermap.org 1. 접속해서 회원가입, 로그인 하고 api-key를 받는다. 2. one-call-api 사용할거임 소..
![]()
Location 사용자의 현재 위치 가져오기 const ask = async () => { ... setOk(false); } // 추가 -------------------------------------------------------------------- const location = await Location.getCurrentPositionAsync({ accuracy: 5 }); console.log(location); // ------------------------------------------------------------------------ }; 추가하고 저장 후 새로고침 하면 coords 객체 안에 나의 현재 위치 정보가 나온다. 이 안에서 나는 위도와 경도만 가져오도록 한다. ..
![]()
Location expo-location 설치 expo install expo-location 캡쳐한다고 다시 입력했는데 이미 설치돼있어서 업데이트 됐다고 뜸. 아무튼 설치 완료. 권한 요청하기 import * as Location from "expo-location"; import { useEffect, useState } from "react"; ... const [location, setLocation] = useState(); // 위치 객체 저장 const [ok, setOk] = useState(true); // 권한 요청 여부 const ask = async () => { const permission = await Location.requestForegroundPermissionsAsync..
Styles Layout setting App.js import { View, Text, StyleSheet } from "react-native"; export default function App() { return ( Seoul 27 Sunny ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "orange", }, city: { flex: 1, justifyContent: "center", alignItems: "center", }, cityName: { fontSize: 68, fontWeight: "500", }, weather: { flex: 3, }, day: { flex: 1, alignItems:..
