하단에 탭을 보여주는 네비게이터 사용하기 라이브러리 설치 라이브러리 설치 명령어) yarn add @react-navigation/bottom-tabs react-native-vector-icons cd ios pod install * 이후 시뮬레이터 재실행 필요(yarn android / yarn ios) Tab Navigator 사용하기 사용 예제 코드) import React from 'react'; import {NavigationContainer} from '@react-navigation/native'; import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'; import {Text} from 'react-native'; ..
좌측 또는 우측에 사이드바를 만들고 싶을 때 사용 라이브러리 설치 라이브러리 설치 명령어) yarn add @react-navigation/drawer react-native-gesture-handler react-native-reanimated * 이후 시뮬레이터 재실행 필요(yarn android / yarn ios) 만약, 시뮬레이터 재실행 중 오류가 난다면, yarn start --reset-cache 명령어로 캐시를 지우고 시뮬레이터를 재실행 해야함 이전에 사용한 navigation.push, navigation.pop 기능은 드로어 네비게이터에서 호환되지 않음 Drawer Navigator 사용하기 사용 예제 코드) import React from 'react'; import {Navigati..
리액트 네이티브에서 여러화면을 관리하기 위한 네비게이션 사용법 확인 라이브러리 적용하기 관련 라이브러리 : react-navigation 이를 위한 의존 라이브러리 미리 설치 필요) yarn add @react-navigation/native yarn add react-native-screens react-native-safe-area-context 라이브러리 적용하기) import React from 'react'; import {NavigationContainer} from '@react-navigation/native'; function App() { return {/* 네비게이션 설정 */}; } export default App; Native Stack Navigator 라이브러리 추가 설치 필..
key-value 형식의 native 저장소 사용하기 useEffect 사용하기 컴포넌트의 특정 상태가 바뀔때 마다 호출되는 Hook 함수(컴포넌트가 가장 처음 렌더링 되었을 때도 호출됨) import React, {useEffect} from 'react'; useEffect() => { console.log(todos); }, [todos]); - 첫번째 인자 : 주시하고 싶은 값이 바뀌었을 때 호출하고 싶은 함수 - 두번째 인자 : 주시하고 싶은 값(배열 안에 넣어서 입력) AsyncStorage 적용하기 해당 메서드는 async 작동함수임에 따라 Promise를 활용함 이에 따라, async와 await 키워드를 붙여서 함수를 활용해야 함 (자세한 내용은 javascript Promise 관련 자..
Image 컴포넌트 없이 아이콘 사용하기 사전 설치 모듈 - Android, iOS 공통 yarn add react-native-vector-icons ****** 이후 iOS 추가 적용 cd ios pod install ios/{앱이름}/Info.plist 파일 내 스크롤 아래 맨 마지막에 위에 다음 코드 추가 (...) UIAppFonts MaterialIcons.ttf 마지막 마무리 yarn ios ****** Android 추가 적용 사항 android/app/build.gradle 파일 열고 맨 아래에 아래 텍스트 추가 apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle") 마지막 마무리 yarn android ..
FlatList를 활용하여 목록형 데이터 관리 컴포넌트 익히기 FlatList 컴포넌트 호출 FlatList 컴포넌트 작성 ( {item.text} )} keyExtractor={item => item.id.toString()} /> - data에 목록에 활용할 데이터 배열 입력 - renderItem 함수에서 data에 입력한 데이터 배열(위에서는 todos) 안의 각 원소들 데이터를 가리키는 뷰를 보여줌 - keyExtractor는 각 항목 키값을 추출함. 보통 index사용하는데 배열 내부 변동 생기면 불필요 업데이트 하므로 따로 지정하는 것이 효율적임 renderItem Props 활용하기(개별 목록 컴포넌트 작성하기) renderItem Props에서 활용할 별도 컴포넌트를 작성하여 개별 목록 ..
이미지, 텍스트 인풋 컴포넌트 활용에 대해 알아봄 Image 컴포넌트 보통 /assets 폴더에 넣어서 관리 화면 밀도에 따라 이미지 여러개 배치 가능 예시) circle.png, circle@2x.png, circle@3x.png 와 같이 @를 써서 밀도만 다른 이미지 배치 운영체제에 따라서 이미지 여러개 배치 가능 예시) circle.ios.png, circle.android.png 와 같이 구분해서 이미지 배치 Image 컴포넌트 사용법 - source : 경로 지정, 경로 입력은 require() 함수 입력 [예제] - resizeMode : 이미지 크기 조정될 때 이미지 처리할 방식 지정 * cover : 이미지 가로세로 비율 유지하여 리사이징. width, height가 이미지 가로세로 비율과..
레이아웃 영역을 잡아주기 위한 flex 개념을 익혀봄 flex 주어진 공간을 얼만큼 채울지 정함 - 숫자를 넣어서 비율을 주는 방식 import React from 'react'; import { View } from 'react-native'; const FlexDemo = () => { return ( ); }; export default FlexDemo; [결과] Flex Direction flexDirection은 부모가 자식 뷰를 어떤 방향으로 배치할지 정함 - column : 위/아래, 세로 방향(기본값) - row : 좌/우, 가로 방향 - column-reverse : 아래/위, 역세로 방향 - row-reverse : 우/좌, 역가로 방향 import React from 'react'; ..
