1. 로그인 화면 버튼 및 이벤트 생성 선행되어야 할 사전 작업이 있다. 루트 디렉토리에 있는 routes.js를 보면 isLoggedIn 이 true인지 false인지에 따라 화면이 다르게 보인다. 그런데 로그인이 안 된 상태에서도 다이어리와 뉴스탭이 있는 메인 화면을 보여주고자 한다. 이건 비회원인 상태에서도 메인화면을 보여주기 위함인데 다이어리 기능은 제한을 두고 뉴스탭만 보여주고자 한다. 그래서 isLoggedIn 이 false일 때 리턴되는 부분에도 메인화면이 보이도록 작업하자. 버튼을 눌러도 아무런 반응을 하지 않는데 이건 onPress를 이용한 이벤트를 발생시키지 않아서이다. 비회원 버튼을 눌렀을 때 메인화면으로 이동할 수 있게끔 작업을 해보자. 구현한 게 화면에 잘 나오는 건 import ..

1. Firebase 프로젝트 생성 우선 firebase 웹사이트로 들어가자. https://firebase.google.com/ Firebase Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다. firebase.google.com 로그인을 진행해주고 시작하기를 누르고 프로젝트 추가를 눌러 새 firebase 프로젝트를 생성해준다. 프로젝트에 들어가면 왼쪽 상단의 햄버거 버튼을 눌러 인증 메뉴를 찾아 눌러준다. 그리고 sign-in method를 들어가 로그인 방법을 설정해준다. 이메일/비밀번호를 사용할 것이므로 이걸 설정해주자. 그리고 프로젝트 개요 메뉴를 찾아 태그 모양 버튼을 눌러주면 앱을 등록할 수 있다. 그리고 이번엔 오른쪽 ..

1. Image Picker 설치 react-native init RN_ImagePicker 위의 명령어로 새로운 프로젝트를 하나 만든다. 프로젝트 생성이 완료되면 해당 프로젝트로 이동하고 아래 명령어를 통해 Image Picker library를 설치해준다. npm install --save react-native-image-picker 설치가 완료되면 ios 폴더로 가서 pod install 을 실행한다. cd ios pod install cd .. 파일로 가서 Add folder to workspace를 통해 해당 폴더를 추가한다. 안드로이드는 추가로 해줄 일이 있다. 카메라랑 라이브러리에 접근 가능하도록 접근권한을 줘야 한다. /android/app/src/main/AdndroidManifest...

13. [Tab] Style 설정 stack navigator, drawer navigator와 유사한데 tab navigator도 drawer navigator와 마찬가지로 각 Screen 컴포넌트에 개별 스타일링은 하지 않는다. 모두 공통적인 스타일을 갖게 되는 ui이기 때문에 navigator 태그 안에 스타일링을 준다. 각 탭에 그림을 삽입함과 동시에 선택되어진 탭의 크기를 좀 더 크게 키워주도록 해보자. 그럼 어떤 탭이 선택되었는지 알아야 하기 때문에 route를 파라미터로 넘겨준다. 원래는 tabBarOptions로 스타일을 정의했지만 이게 deprecated 되고 ScreenOptions를 사용하는 것으로 권장된다. 사실 tabBarOptions 안에 썼던 프로퍼티들 앞에 tabBar를 붙이..

6. [Stack] 여러 화면에 공통 Style 적용 여러 화면에 공통으로 Style을 적용하기 위해서는 Stack Navigator에 스타일을 지정해주면 된다. 여기서 프로퍼티 이름이 달라지는데 options가 아니라 screenOptions라는 이름으로 프로퍼티를 주면 된다. 그리고 모든 화면에 공통으로 스타일을 적용하고 단 하나의 화면만 스타일을 다르게 주고 싶으면 기존의 해당 화면의 Stack Screen에서 options 프로퍼티를 주면 된다. App.js /** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow strict-local */ import React, {Component} ..