얼렁뚱땅

Drawer Navigation 이란? 숨어있다가 필요할 때 화면 왼쪽 모서리 부분을 누르면 (또는 왼쪽에서 오른쪽으로 드래그를 하면) 나타나는 내비게이션 Drawer Navigation 라이브러리 설치 npm i @react-navigation/drawer 파일, 폴더 구성 (기본 뼈대 구성) 이미 tab navigation이 완성된 상태에서 drawer navigation을 구현하려고 한다. 내가 구현하고 싶은 구조 : 3개의 tab screen 중에서 한가지 tab에서만 drawer navigation이 작동하도록 만들고 싶다! 하지만 'combining tab and drawer navigation' 으로 검색하면 대부분 3개의 tab에서 모두 drawer navigation이 구현되는 예시만 있..

Tab Navigation을 위한 라이브러리 설치 npm i @react-navigation/bottom-tabs 파일, 폴더 구성 (기본 뼈대 구성) src 밖 App.js -> src 안 App.js -> navigations 폴더의 index.js -> MainTab.js -> Mainscreen.js, Mypage.js, Instagram.js 페이지 가져오기! src 밖 App.js import App from './src/App'; export default App; 모든 코드를 src 폴더 내에서 관리하는 것이 편해서 이렇게 했다. src/App.js import React from 'react'; import Navigation from './navigations'; export defau..

React Native 프로젝트 생성 방법은 2가지가 있다. Expo 이용 RN CLI 이용 Expo 리액트 네이티브를 편하게 사용할 수 있도록 미리 여러가지 설정이 되어 있는 툴 장점 사용하기 쉬우며 쉽게 배포 및 관리 가능 나는 처음 사용해보는 것이기 때문에 Expo를 선택했다. 핸드폰이 있으면 Xcode나 안드로이드 스튜디오 없이도 테스트를 진행하며 개발 가능 윈도우 환경이라서 Xcode가 없지만 iphone으로 테스트 가능했다. 단점 Expo에서 제공하는 API만 사용 가능 필요한 기능이 제공되지 않을 경우 네이티브 모듈을 추가로 만들어서 사용하는 것이 불가능 Expo 프로젝트 생성 1. npm을 이용해서 expo-cli 설치 npm install --global expo-cli 2. Expo 프..

그동안 여러 프로젝트를 진행하면서 노트북에 이것저것 너무 많은 것들을 설치했다. 정리하기가 어려워서 노트북 초기화를 하고 처음부터 다시 시작해보고자 한다. React Native를 개발하기 위해서는 아래 리스트의 설치가 필요하다. Node.js Python JDK Andriod Studio Visual Studio Code Expo 어플리케이션 1. Node.js Node.js 를 설치하면 node package manager인 npm도 함께 설치된다. 웹페이지에서 LTS 버전 다운로드 받아서 설치하기 설치 확인 : node --version 2. Python RN는 빌드할 때 파이썬이 필요함 RN에서는 python 2 version 사용 근데 나는 그냥 웹페이지에서 version 3을 다운받았다. 이렇..