FE/react-native

FE/react-native

DropDownPicker 속성 파헤치기

- 결과물 요 드롭다운을 만들어볼 것이다. 라이브러리 써서 간단해보이지만... 속성 찾느라 힘들었더란다... - 다운받기 npm install react-native-dropdown-picker - 드롭다운 내부 background color 조절하는 속성 dropDownContainerStyle={{backgroundColor: 'transparent', borderColor:"white",zIndex:100}} - 드롭다운 내부 text color 조절하는 속성 listItemLabelStyle={{ color: 'white', zIndex:"100" }} - 드롭다운 arrow icon 크기 조절하는 속성 arrowIconStyle={{width: 20, height: 20}} - 드롭박스 내부 v..

FE/react-native

react native expo 버전에서 아이콘 패키지 써보기

1. 기존 코드 나는 니꼬쌤의 react native 기본 강의를 보면서 간단한 날씨 어플을 만들었다. // import { StatusBar } from 'expo-status-bar'; import * as Location from "expo-location"; import { useEffect, useState } from 'react'; import { StyleSheet, Text, View, ScrollView, Dimensions, ActivityIndicator } from 'react-native'; const {width:SCREEN_WIDTH} = Dimensions.get("window"); const API_KEY ="15195b65e8894febd84d5a8e8357ef06"; ..

FE/react-native

react-native 로딩바 적용해보기

ActivityIndecator을 쓰면 된다. import { ActivityIndicator } from 'react-native'; 이런식으로 import를 해주고, 컴포넌트처럼 써주면 된다. 내부에 스타일도 저런식으로 넣어줄 수 있다. 결과

FE/react-native

react-native에서 open weather 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 위 사이트에서 무료 날씨 정보를 얻어올 것이다. 가입하고 Current Weather이나 3-hour Forecast 5 days 중 하나를 선택해 들어가 subscribe를 한다. 가만 읽어보니 ..

FE/react-native

react-native에서 expo-location을 이용해 유저 위치 정보 가져오기

1. expo-location 다운 expo install expo-location 2. expo-location 사용법 import * as Location from "expo-location"; export default function App() { const [location, setLocation] = useState(); const [ok, setOk] = useState(true); const ask = async () =>{ const permission = await Location.requestForegroundPermissionsAsync(); console.log(permission); } useEffect(()=>{ ask(); },[]); } //결과 {"canAskAgain":..

FE/react-native

react native는 기본 flex box 기반이다.

https://reactnative-archive-august-2023.netlify.app/docs/0.65/scrollview ScrollView · React Native Component that wraps platform ScrollView while providing integration with touch locking "responder" system. reactnative-archive-august-2023.netlify.app 주로 공식문서에서 react native 기본을 떼자 1. flex 웹에서는 flex direction 기본 방향이 row이지만, react native에서는 기본 방향이 column이다. 핸드폰의 크기는 정말 다양하기 때문에 대부분 width나 height을 설..