해당 글에서는 react-native-calendars에 대해 이해하고 응용하는 다양한 예시를 알아봅니다. 1) react-native-calendars 💡 react-native-calendars - 리액트 네이티브 애플리케이션에서 캘린더 기능을 구현하기 위한 패키지입니다. 해당 패키지는 Android 및 iOS 둘 다 호환이 가능합니다. 1. 설치 과정 💡 패키지 매니저인 npm이나 yarn을 이용하여 설치하여 주시면 됩니다. $ npm install --save react-native-calendars # or $ yarn add react-native-calendars 2. Calendar 속성 속성 설명 onDayPress 날짜를 선택했을 때 호출되는 콜백 함수 markedDates 특정 날짜에..
해당 글에서는 React-native에서 firebase_analytics를 APK 파일을 구성하는 단계에서 발생하는 오류와 해결 방법에 대해 알아봅니다. 1) 문제점 💡 아래와 같은 문제가 발생하였습니다. - @react-native-firebase_analytics:copyReleaseJniLibsProjectAndLocalJars > Task :@react-native-firebase_analytics:copyReleaseJniLibsProjectAndLocalJars FAILED FAILURE: Build failed with an exception. * What went wrong: A problem was found with the configuration of task ':@react-nat..
해당 글에서는 React-native 개발 환경 중 안드로이드 디바이스에 대해 뒤로 가기 버튼에 대해서 방지하는 방법에 대해 공유합니다. 1) BackHandler 💡 BackHandler - Android 기기의 하드웨어 백 버튼을 처리하는 인터페이스를 제공하는 모듈입니다. 이 모듈을 사용하면 백 버튼 누름 이벤트를 감지하고 버튼이 눌렸을 때 사용자 정의 로직을 구현할 수 있습니다. - react-native 설치 시 해당 모듈이 포함되어 있습니다. 💡 [참고] 해당 디바이스 화면에서 뒤로가기 버튼을 의미합니다. 2) BackHandler 활용 1. 라이브러리 가져오기 import { BackHandler } from 'react-native'; 2. 이벤트 리스너 등록 💡 화면이 렌더링 된 이후 us..
해당 글에서는 react-native에서 발생하는 오류에 대한 해결방법에 대해 공유합니다 1) 문제점 💡 콘솔 상에 아래와 같이 .env 파일에 정의한 데이터를 불러오지 못하여 undefined 값으로 출력되고 있는 문제가 발생하였습니다. handleWebViewStateChange {"canGoBack": false, "canGoForward": false, "loading": false, "target": 139, "title": "", "url": ""} WARN Encountered an error loading page {"canGoBack": false, "canGoForward": false, "code": -2, "description": "net::ERR_NAME_NOT_RESOLVED"..
해당 글에서는 react-native에서 발생하는 오류에 대한 해결방법에 대해 공유합니다 1) 문제점 💡 아래와 같은 문제가 발생하였습니다 Unable to load script. Make sure you're either running a Metro server (run 'react-native start') or that your bundle 'index.android.bundle' is packaged correctly for release. 2) 해결방법 시도한 해결 방법-1 : 포트포워딩 — 해결되지 않음 💡 adb reverse tcp:8081 tcp:8081 명령어는 안드로이드 디버깅 브리지(ADB)를 사용하여 포트 포워딩을 설정하는 명령입니다. 이 명령은 로컬 8081 포트의 트래픽을 장치..
해당 글에서는 react-native에서 발생한 오류에 대해 해결방법에 대해 공유합니다. 1) 문제점 💡 아래와 같은 문제점이 발생하였습니다. - 이는 프로젝트 경로에 로컬 debug.keystore가 존재하지 않아 발생하는 문제입니다. FAILURE: Build failed with an exception. What went wrong: Execution failed for task ':app:validateSigningDebug'. Keystore file '/Users/lee/Desktop/workspace/xxx/xxxx/android/app/debug.keystore' not found for signing config 'debug'. 2) 해결방법 💡 이를 해결하기 위해 debug.keysto..
해당 글에서는 react-native에서 발생한 오류에 대한 해결방법에 대해 공유합니다. 1) 문제점 💡 react-native에서 안드로이드 디바이스로 로컬에서 빌드를 수행하여 빌드가 완료되면 기존에는 앱이 앱 목록에 생기고 시작되던 상황에서 ”앱이 생기지 않고 실행”되는 문제점이 발생함. (환경설정에서 앱 목록에는 보이나 앱이 생성이 안됨) 2) 해결 방법 💡 AndroidManifest.xml 파일에서 태그를 분리시켜서 구성하면 수행된다는 글을 확인하여 적용하여서 이에 대해 해결을 하였습니다. 1. 기존 소스코드 2. 적용 소스코드 💡 [참고] 해결에 도움을 준 블로그입니다. [ReactNative] RN - 리액트 네이티브 안보이는 앱 아이콘 보이게 하기 안드로이드 설정 문제로 인해 발생하는 문제..
해당 글에서는 react-native에서 발생하는 오류에 대한 해결방법에 대해 공유합니다 1) 문제점 💡 아래와 같은 문제가 발생하였습니다. metro-file-map: Watchman crawl failed. Retrying once with node crawler. usually this happens when watchman isn't running. create an empty .watchmanconfig file in your project's root folder or initialize a git or hg repository in your project. 2) 해결 방법 💡 watchman 크롤링 과정에 문제가 발생하였다고 합니다. 이에 대해 “문제가 지속되는 경우, Watchman 및 n..
해당 글에서는 React-native 디바이스 테스트 기기로 포코폰을 이용하기 위해 환경을 구성하는 방법에 대해 공유합니다. 1) ‘설정’ 아이콘을 선택합니다. 2) 설정 탭 내에서 ‘휴대전화 정보’ 탭을 선택합니다. 3) 휴대전화 정보 탭에서 ‘MIUI 버전’을 5번 선택하면 아래와 같은 메시지가 출력됩니다. 4) 설정 - 일반 탭으로 들어가서 ‘개발자 옵션’을 선택합니다 5) 개발자 옵션에서 하단으로 내려 ‘디버깅’ 부분에서 ‘USB 디버깅’을 선택합니다. 6) 선택하면 아래와 같은 화면이 출력되고 ‘확인’ 버튼을 누릅니다. 7) 터미널에서 연결을 확인합니다. $ adb devices [ 더 알아보기 ] 💡 adb 명령어가 수행이 안되는데 어떻게 하는가? - 아래의 명령어를 실행시켜 설치를 수행합니다..
해당 글에서는 갤럭시에서 개발자 모드를 설정하는 방법에 대해 알아봅니다. 1) '설정'으로 들어갑니다. 2) 설정 탭에서 ‘휴대번호 정보’ 탭을 선택합니다 3) '소프트웨어 정보' 탭을 선택합니다. 3) 소프트웨어 탭 중에 ‘빌드번호’ 탭을 5번 눌러줍니다. 4) '개발자 옵션 탭'에서 'USB 디버깅'을 선택합니다. 5) 터미널에서 연결을 확인합니다. $ adb devices [ 더 알아보기 ] 💡 adb 명령어가 수행이 안되는데 어떻게 하는가? - 아래의 명령어를 실행시켜 설치를 수행합니다. brew install --cask android-platform-tools 99) [참고] 만약 unauthorized 상태가 지속된다면 💡 아래와 같이 unauthorized 상태가 계속된다면 4)번 과정을 ..
