프론트엔드 개발자의 개발 놀이터

화면에서 햄버거 메뉴 버튼을 누를 시 좌측 또는 우측 사이드바가 나오는 화면을 만들고 싶을 땐 Drawer Navigator를 사용하면 됩니다. 1. 설치 yarn add @react-navigation/drawer 2. 등록 여기서 기존의 Bottom Navigator를 등록하는 방식에서 약간의 차이점이 발생합니다. 기존엔 안에 를 등록하는 방식이였다면, 가 등록되기 전에 가 먼저 등록되고 그 다음 를 등록하는 방식으로 변경이 되어야 합니다. before : NavigationContainer > Bottom.Navigator > Bottom.Screen after : NavigationContainer > Drawer.Navigator > Drawer.Screen > Bottom.Navigator >..

import {useIsFocused} from '@react-navigation/native'; const isFocused = useIsFocused(); useEffect(() => { if (isFocused) { // 포커싱이 되면 tabBar display none navigation.getParent().setOptions({tabBarStyle: {display: 'none'}}); } else { // none 포커싱이 되면 바뀐 tabBarStyle을 재설정 해주어야 합니다. navigation.getParent().setOptions({ tabBarStyle: { display: 'flex', backgroundColor: '#000000', borderTopColor: '#59565..

일반적으로 Bottom tabs Navigator에 등록된 Screen을 누르면 component에 등록된 첫번째 스택이 보여지게 됩니다. 하지만 메모 앱과 같이 Screen을 누르면 다음 스택(메모 작성 화면)으로 이동하는 기능을 추가하고 싶을 때는 Screen에 listeners를 등록해주고 navigation.navigate() 함수를 사용하여 이동되도록 하면 됩니다. flow : 앱 실행 -> Bottom tabs Navigator의 첫번째 Screen Load -> 첫번째 Screen의 component에 등록된 첫번째 Stack이 화면에 보여짐 -> tabBarIcon을 누르면 listeners에서 다음 스택으로 이동하는 함수 호출 // BottomNavigation.tsx ({ tabPres..

async-storage 라이브러리 @react-native-async-storage/async-storage GitHub - react-native-async-storage/async-storage: An asynchronous, persistent, key-value storage system for React Native. An asynchronous, persistent, key-value storage system for React Native. - GitHub - react-native-async-storage/async-storage: An asynchronous, persistent, key-value storage system for React Native. github.com RN cs..

1. 'value' is unavailable: introduced in iOS 12.0node_modules/react-native/scripts/cocoapods/codegen_utils.rb 경로의 87 라인'ios' => '11.0', 를  'ios' => '12.0’, 로 변경 후ios 폴더 경로에서 pod install 2. [!] CocoaPods could not find compatible versions for pod "react-native-safe-area-context" ~~~Podfile 의 platform :ios, '11.0’ 를 ’12.0’로 변경 후 pod install 3. [!] Unable to find a specification for `React-hermes` ..

1. 갤럭시 에뮬레이터 스킨 다운로드 https://developer.samsung.com/galaxy-emulator-skin Samsung Developers The world runs on you. developer.samsung.com * 삼성 개발자 계정으로 로그인해야 다운로드 가능합니다. 사이트 하단의 Device 영역에서 다운로드 받은 기기의 스펙을 볼 수 있습니다. (중요) 예를들어 갤럭시 Z 폴드5를 등록하고 싶으면 다운로드 스킨을 받고 Display와 Resilution을 기억해둡니다. 2. 스킨 추가하기 Window C:\Users\YourName\AppData\Local\Android\Sdk\skins Mac ~/Library/Android/sdk/skins 경로에 다운로드 받은 폴..

일반 앱 아이콘https://www.appicon.co/ App Icon Generator www.appicon.co안드로이드 라운드 앱 아이콘http://romannurik.github.io/AndroidAssetStudio/icons-launcher.html#foreground.type=image&foreground.space.trim=1&foreground.space.pad=0.25&foreColor=rgba(96%2C%20125%2C%20139%2C%200)&backColor=rgb(255%2C%20255%2C%20255)&crop=0&backgroundShape=square&effects=none&name=ic_launcher Android Asset Studio - Launcher icon g..

시작하기 앞서 React Native는 iOS와 Android 정책에 영향을 많이 받기 떄문에 버전관리가 필수인 언어입니다.예를들어 Android 버전이 바뀜에 따라 지원하는 SDK 버전이 제한된다던지 하는 이슈가 있습니다.때문에 RN 개발자들은 버전에 대한 이슈에 빠르게 대응할 수 있어야 합니다. 1. 설치npx react-native init [프로젝트 명] --version 0.74.5명령어 대로 설치를 진행하면Do you want to install CocoaPods now? 라고 질문을 합니다.어차피 나중에 계속 pod 설정을 해줘야하기 때문에 No를 입력해줍니다.(ruby-version이 안맞을 시 에러가 뜰 수 있습니다. 에러가 뜬다해서 설치가 안되거나 하진 않습니다.)만약 ruby-vers..