M Project 개발일지(3)

예짱·2021년 2월 23일

JavaScript React frontend project react native 앱개발 크로스플랫폼앱 프론트엔드

[프론트엔드/RN] M project

목록 보기

3/6

🍎 2021.02.24 🍎

탭 네비게이션 (Tab navigation)

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

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

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

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

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

시행착오

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

✅ ERROR #1

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

✅ 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

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

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

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];
    }
}