M Project 개발일지(3)

🍎 2021.02.24 🍎

탭 네비게이션 (Tab navigation)

• RN에서 사용할 수 있는 네비게이션에는 stack, tab, drawer 등 여러 종류가 있는데 그중에서도 하단 탭 아이콘을 클릭해 이동할 수 있는 Tab Navigation 방식을 사용하고자 한다.

1. 필요 라이브러리 설치 (mac 기준)

npm install react-navigation-tabs --save
npm install react-native-reanimated --save

2. react-native navigation Tab 기본 라이브러리
   

• 다음과 같이 3가지 종류가 있는데 이중에서 나는 createMaterialBottomTabNavigator를 사용해 보았다.

3. 시행착오

• https://reactnavigation.org/docs/tab-based-navigation
• 공식 문서 및 구글링을 통해서 여러 개의 js파일로 나눠 작성해보기도 하고 많은 방법을 사용했는데 오류가 정말 많았다.

✅ ERROR #1

TypeError: undefined is not a function (near '...(0, _reactNavigationTabs.createMaterialBottomTabNavigator)...')

• https://stackoverflow.com/questions/53983086/undefined-is-not-a-function-near-reactnavigation-stacknavigator
• https://github.com/expo/expo/issues/1596
• https://medium.com/@saishaddai/react-native-undefined-is-not-a-function-evaluating-0-reactnavigation-stacknavigator-1d9979eba2e8

✅ ERROR #2

metro has encountered an error sha-1 for file ...

• https://medium.com/@jeafgilbert/react-native-error-metro-bundler-has-encountered-an-error-sha-1-cea7998bb900

❌ ERROR #3

unable to resolve module react-native-vector-icons/IonIcons
unable to resolve module react-native-vector-icons/FontAwesome

• unlink 및 uninstall 후 재설치 --> cd ios --> pod install 시도 (x)
• info.plist 확인 및 package.json 수정 (x)
  
• 정말 구글링이란 구글링은 다 했는데 해결 안됨
• 일단 과부하가 와서 icon은 빼고 만들어놓았다. 나중에 추가해야지...

4. App.js

• 처음에는 Tabnavigation.js 문서도 따로 만들어보고 했는데, 결국엔 다음과 같이 App.js를 작성해 해결했다.
  (물론 나중에 디테일을 추가하면서 바뀔 수도 있지만)

import {createAppContainer} from 'react-navigation';
import { createMaterialBottomTabNavigator} from 'react-navigation-material-bottom-tabs';
import DiaryMemo from './screens/Diarymemo';
import MoodStat from './screens/MoodStatistics';
import MainPage from './screens/MainPage';
import Store from './screens/Store';
import Community from './screens/Community';

const TabNavigator = createMaterialBottomTabNavigator ({
    Diary: {
        screen: DiaryMemo,
    ...
    },
},
    {
        initialRouteName: 'Home',
        shifting: false,
        activeColor: '#ffffff',
        inactiveColor: 'white',
        barStyle: {backgroundColor: '#ffffff'},
    
});

export default createAppContainer(TabNavigator);

이미지 불러오기 오류

• 저번부터 계속 프로젝트 실행 중간 중간에 이미지가 제대로 보여지지 않는 문제가 나타났다.
• 이전 포스트에서 patch update를 했다고 했는데 이도 마찬가지로 patch 관련해서 해결 가능하다.
• https://jqn.medium.com/fix-images-not-loading-in-ios-14-react-native-723534305e46

1. npm install patch-package
2. 코드 에디터에서 (나는 VSCode 사용함) RCTUIImageViewAnimated.m 파일 열기
   • 경로: node_modules > react-native > Libraries > Image

$ vi node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m

3. RCTUIImageViewAnimated.m 파일을 다음과 같이 수정한다.

#pragma mark - CALayerDelegate

- (void)displayLayer:(CALayer *)layer
{
	if (_currentFrame) {
    	layer.contentsScale = self.animatedImageScale;
        layer.contents = (__bridge id)_currentFrame.CGImage;
    } else {
    	[super displayLayer:layer];
    }
}

• 이렇게 수정하고 다시 npx react-native run-ios를 터미널에 입력하니 시뮬레이터에 이미지가 제대로 출력됐다!

To do list 💻

오류 수정하느라 하루를 다 사용해 버려서 일정이 밀림

/ 02.24 ~ 02.25 오후 /

• chatbot 디자인
• Diarymemo.js 디자인
• font & design 조금만 수정 (- 어차피 디테일은 나중에!)
• 스토어 / 커뮤니티 coming soon 만들기

/ 02.25 저녁 ~ 02.26 /

• checkbox state, 컴포넌트 확인
• firebase - 장고 - RN 공부
• 앞으로 만들어야 할 디테일 리스트 작성하기