728x90 rn19 [RN] 드랍다운(Dropdown) 사용하기 리액트 네이티브 버전 : "react-native": "0.69.2" 드랍다운(Dropdown) 사용하기 라이브러리를 활용하여 드랍다운을 사용해봤다. 웹개발을 할 때는 HTML에서 기본으로 제공하는 건데, 리액트 네이티브는 라이브러리를 설치해서 사용해야했다. npm i react-native-dropdown-picker 명령어로 설치하면 "react-native-dropdown-picker": "^5.4.3" 버전이 설치 된다. - 예시 코드 const [open, setOpen] = useState(false); const [value, setValue] = useState(null); const [items, setItems] = useState([ {label: '보기1', value: '1'}, .. 2022. 11. 18. [RN] 현재 위치의 경도, 위도 가져오기 리액트 네이티브 버전 : "react-native": "0.69.2" 라이브러리를 활용하여 현재 위치의 경도, 위도를 가져와봤다. npm i @react-native-community/geolocation 로 설치하면 "@react-native-community/geolocation": "^3.0.3" 버전이 설치된다. 안드로이드와 iOS 설정을 해줘야 한다. - iOS ios 폴더에서 pod install 후 Info.plist에 NSLocationWhenInUseUsageDescription 을 찾아서 아래 코드를 넣어준다. NSLocationAlwaysAndWhenInUseUsageDescription NSLocationAlwaysUsageDescription - Android andriodMani.. 2022. 11. 13. [RN] AsyncStorage 사용하기 React Native AsyncStorage 사용하기 현재 개발하면서 사용하는데, 자꾸 console로 찍어 보면 이상하게 나와서 사용법을 정리해보려고 한다. 일단 AsyncStorage는 웹에서 사용하는 LocalStorage와 같은 기능을 한다고 생각하면 편하다. 리액트나 리액트 네이티브에서는 상태관리하는 라이브러리들이 있는데, 난 일단 Context를 사용한다. 그리고 로그인 토큰을 보관하기 위해서 AsyncStorage를 사용한다. 상태관리로 하면 앱이 종료되었을 때는 초기화가 되기 때문에 자동 로그인을 위해서 AsyncStorage를 사용한다. 1. 저장 AsyncStorage.setItem('key', value); 자바의 맵 처럼 키, 밸류 방식으로 저장하고 사용한다. 혹시 String 값.. 2022. 11. 6. [RN] Calendars 넣어보기 리액트 네이티브로 간단한 앱을 만들면서 겪었던 일을 기록합니다. 리액트 네이티브 버전 : "react-native": "0.69.2" - 화면에서 달력을 그려보려고 한다. - 직접 만들 수도 있지만, 귀찮으니 사람들이 만들어놓은 라이브러리를 쓴다. - 기본 디자인이 심플하고 마음에 들어서 선택했다.(기능은 거기서 거기) npm i react-native-calendars - 라이브러리를 설치한다. - 코드 작성 { setSelectedDate(day.dateString); }} markedDates={markedSelectedDates} /> - 테마는 원하는 색으로 변경하면 된다. - 사실 github을 참고하는게 제일 좋지만... 그게 귀찮으면 이 코드를 복사해서 사용해도 된다. - 참고 https:.. 2022. 11. 2. [RN] React Navigation TopTab 꾸미기 http://devhooney.tistory.com/84 [RN] React Navigation TopTab 추가 리액트 네이티브로 간단한 앱을 만들면서 겪었던 일을 기록합니다. 리액트 네이티브 버전 : "react-native": "0.69.2" - 지난번에 하단 탭을 만들었었다. - 이번에는 상단에 위치하는 탭을 만들어보았다 devhooney.tistory.com 이 포스팅과 이어지는데, tabBarActiveTintColor: 'red'는 선택한 탭일 경우의 글자 색을 변경한다. tabBarInactiveTintColor: 'blue'는 선택 안한 탭일 경우의 글자 색을 변경한다. tabBarPressColor: 'red'는 선택하려고 터치 했을 경우 글자 색을 변경한다. tabBarIndicato.. 2022. 11. 1. [RN] React Navigation BottomTab 아이콘 변경 리액트 네이티브로 간단한 앱을 만들면서 겪었던 일을 기록합니다. 리액트 네이티브 버전 : "react-native": "0.69.2" - 지난번에 하단 탭을 만들었는데 거기에 아이콘을 넣으려고 react-native-vector-icons 라이브러리를 설치했다. - 하지만 자꾸 typescript에서 에러가 발생했다. - 원인은 타입스크립트용 라이브러리를 추가로 설치해야되는 것이었다. npm install --save react-native-vector-icons npm install @types/react-native-vector-icons - 원하는 아이콘을 선택해서 넣었는데, 계속 에러가 떴다. - 이전과 다르게 "react-native-vector-icons": "^9.2.0" 버전에서는 pod .. 2022. 8. 11. [RN] React Navigation TopTab 추가 리액트 네이티브로 간단한 앱을 만들면서 겪었던 일을 기록합니다. 리액트 네이티브 버전 : "react-native": "0.69.2" - 지난번에 하단 탭을 만들었었다. - 이번에는 상단에 위치하는 탭을 만들어보았다. npm i @react-navigation/material-top-tabs - 라이브러리를 설치해준다. - 다음은 바로 코드 작성 import React from 'react'; import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs'; import TestScreen from './TestScreen'; import Test2Screen from './Test2Screen'; const TopTap .. 2022. 8. 9. [RN] React Navigation Bottom Tab 추가 리액트 네이티브로 간단한 앱을 만들면서 겪었던 일을 기록합니다. 리액트 네이티브 버전 : "react-native": "0.69.2" 지난번에 내비게이션을 설치해서 기본 세팅을 했었고, 이번엔 화면 하단에 탭을 추가해봤다. import React from 'react'; import {createNativeStackNavigator} from '@react-navigation/native-stack'; import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'; import MainScreen from '../screens/main/MainScreen'; import SettingScreen from '../screens/main/Set.. 2022. 8. 3. [RN] React Navigation Setting 리액트 네이티브로 간단한 앱을 만들면서 겪었던 일을 기록합니다. 리액트 네이티브 버전 : "react-native": "0.69.2" - 리액트 내비게이션 설치 https://reactnavigation.org/docs/getting-started https://reactnavigation.org/docs/getting-started/ reactnavigation.org - 공홈을 참조해서 설치한다. - 나는 설치했더니 "@react-navigation/native": "^6.0.11" 버전이었다. - 리액트 네이티브는(iOS) 라이브러리 설치 후 ios 폴더로 이동하여 "pod install"을 해줘야 한다. - 실행을 했더니 에러 던진다. "@react-native-community/masked-vi.. 2022. 7. 24. 이전 1 2 3 다음 728x90
