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을 설..

SHIN SANHA
'FE/react-native' 카테고리의 글 목록