728x90 반응형 React Native12 [RN] TODO APP - 헤더 만들기 이번 TO-DO APP은 RN에서 데이터 유지를 어떻게 시키는지에 대해서 알아볼 것이다. 그럼 expo init 파일이름 --npm을 하고 프로젝트를 만들어주자 (❁´◡`❁) 기본 setting padding css에서는 padding right나 padding left 같은 것들이 있는데 css에 없는 속성인padding을 가로,세로 방향으로 줄 수도 있다. 바로 paddingVertical과 paddingHorizontal이다. ++)padding :"50px 10px" 이면 위,아래를 50px, 좌우로 10px을 주겠다는 것이다. space-between space between을 통해 요소들 사이에 동일한 간격을 준다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 1.. 2022. 5. 20. [RN] WeatherApp 만들기 - Icons 사용하기 expo안에 expo/vector icon이 있다. 여긴 많은 아이콘이 있는 라이브러리이다. https://icons.expo.fyi/ @expo/vector-icons directory icons.expo.fyi 날씨가 흐리면 흐린 이모티콘을 UI에 보여줄 것이고 날씨가 좋으면 햇빛 이모티콘을 UI에 보여줄 것이다. Fontisto 스타일의 아이콘을 import해온다. 날씨에 대한 정보를 icons라는 객체에 담고 온도 옆에다가 이모티콘을 달아줄건데 (그렇기에 View에 flexDirection을 row로 해준것!) icons[day.weather[0].main]의 정체가 궁금해진다. 객체에 접근할때 예를 들어 const student={name:"meaning",age=21} 이런식으로 객체가 있다면.. 2022. 5. 14. [RN] Weather App을 만들기 위해 Weather API 받아오기 open Weather api라는 사이트에서 날씨정보를 받아올 것이다. fetch를 통해 날씨정보를 받아오고 여기서는 exclude라는 기능이 있어서 UI에 보이게 하고 싶지 않은 정보는 exclude를 사용하면 된다! days라는 변수안에 각 날 마다의 날씨정보를 담아주고 로딩중일때는 요 표시가 나오고 로딩이 끝나면 day배열에 있는 날씨를 ui에 보여줄 것이다. 로딩중인 걸 보여주기 위해 Activity Indicator를 사용해볼것이다. 로딩이 끝나면 날씨 정보를 보여줘야 한다!! api에서 daily에 해당하는 부분이 배열이다.!! days 배열을 map을 통해서 배열에 있는 item을 꺼내올 것이다 Text strings must be rendered within a component. 그러다보.. 2022. 5. 14. [RN] Weather APP만들기 위한 geolocation 받아오기 https://docs.expo.dev/versions/latest/sdk/location/ Location - Expo Documentation Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React. docs.expo.dev expo documentation을 보면 location 에 대한 내용이 있다. 여기 코드를 활용하여 접근권한을 설정해주면 되는데 useState,useEffect, async,await를 활용하여 초기설정을 해준다. granted가 true가 되면서 위치정보 수집이 허용된다. 이제 이 permission이라는 변수 안에.. 2022. 5. 14. 이전 1 2 3 다음 728x90 반응형
