[리액트 네이티브를 다루는 기술 #15] 8장 Firebase로 사진 공유 앱 만들기1 (p .407 ~ 418)

@ List

* 8.1 프로젝트 준비하기

** 8.1.1 내비게이션과 아이콘 설정하기

** 8.1.2 Firebase 적용하기

** 8.1.3 화면 구성 이해하기

 

@ Note

1. 내비게이션 및 아이콘 관련 라이브러리 설치

$ yarn add @react-navigation/native react-native-screens react-native-safe-area-context @react-navigation/native-stack @react-navigation/bottom-tabs react-native-vector-icons

 

2. Android Firebase 적용

 - Fisebase 가이드 따라서 진행

 - 디버그 서명 인증서 SHA-1 확인 명령어

$ keytool -J-Duser.language=en -list -v -alias androiddebugkey -keystore ./android/app/debug.keystore

  > .langage=en 옵션을 통해 키에 대한 정보를 영어로 설정한 이유는, OpenJDK 8의 keytool에서 더 이상 MD5 지문을 보여주지 않는데, 한국어 설명에는 반영되지 않아 지문의 값이 한 줄 밀려서 SHA1이 있을 자리에 SHA256 값이 나타나는 버그가 있기 때문임

  > key 비밀번호는 공백 상태로 바로 'Enter' 키 클릭

 

 

3. iOS Firebase 적용

 - Fisebase 가이드 따라서 2단계 까지만 진행, 3단계 및 4단계는 Reavt Native Firebase 설치로 대체

  > React Native Firebase 는 리액트 네이티브에서  Firebase를 쉽게 사용할 수 있게하는 라이브러리

  > reference : https://rnfirebase.io

$ yarn add @react-native-firebase/app @react-native-firebase/auth @react-native-firebase/firestore @react-native-firebase/storage

 > 설치 시 '[!] CocoaPods Could not find compatible versions for pod "Firebase/CoreOnly":' 라는 에러 가 발생하면, ios 디렉터리로 이동한 후 아래 명령어 입력

$ pod install --repo-update

 - GoogleService-Info.plist 파일 추가 시, 'Copy Items if needed' 옵션 체크 후 진행

 

 

<< 2022-02-03 추가 >>

> 상기 3,4단계를 생략하는 대신, React Native Firebase 설치를 위해 하기 코드 추가 입력

# ios/PublicGalleryBocoder/AppDelegate.m

# import <Firebase.h>  // 추가
...


@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
#ifdef FB_SONARKIT_ENABLED
  InitializeFlipper(application);
#endif

// 추가 
  if ([FIRApp defaultApp] == nil) {     
    [FIRApp configure];
  }

...

 

@ Result

개발 화면 설계

 

@ Git

 - https://github.com/eunbok-bocoder/PublicGalleryBocoder/commits/main

 

# screens > RootStack.js

import React from 'react';
import {createNativeStackNavigator} from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

function RootStack() {
  return <Stack.Navigator>{/* 화면 추가 예정 */}</Stack.Navigator>;
}

export default RootStack;

 

# App.js

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import RootStack from './screens/RootStack';

function App() {
  return (
    <NavigationContainer>
      <RootStack />
    </NavigationContainer>
  );
}

export default App;

 

# ios > PublicGalleryBocoder > Info.plist

(...)
	<key>UIViewControllerBasedStatusBarAppearance</key>
	<false/>
	<key>UIAppFonts</key>
	<array>
		<string>MaterialIcons.ttf</string>
	</array>
</dict>
</plist>

 

# android > app > build.gradle

project.ext.vectoricons = [
    iconFontNames: ['MaterialIcons.ttf']
]

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"