1일 1개발공부˙Day 9

calendar15에서 일어나는 navigation 관련 문제를 해결해보려고

calendar 17을 새로 만들었다

1. MainScreen 만들기

원본 코드에서 MainTab는 하단에 피드,캘린더 등의 화면으로

전환할 수 있는 네비게이션 바가 보이는 컴포넌트이다

나는 이게 필요 없으니 만들지 않았다

캘린더 스크린과 피드 스크린은 App.js에서 합쳐놨으니

다른게 필요 없었다

그런데 NavigationContainer를 만들기 위해

한번 넣어보려고 한다.

​

MainScreen에서

캘린더스크린과 피드 스크린을 합칠 것이다.

 

2. RootStack 만들기

네이티브 스택 네비게이터

- const Stack = createNativeStackNavigator(); // Stack Navigation함수를 Stack변수명으로 저장

출처: https://conansjh20.tistory.com/76 [취미는 파이썬:티스토리]

- 스택 내비게이션은 말그대로 스택으로 작동되는 내비게이션이다...!

https://eunbin00.tistory.com/41

- 스택 네비게이션

스택 네비게이션의 개념은 자료구조의 스택처럼 하나씩 쌓아가는 개념입니다. 만약 모바일 앱에서 어떤 다른 페이지로 이동을 한다고 했을 때 그 페이지로 완전히 전환 되는 것이 아닌 그 페이지가 위에 쌓인다고 할 수 있습니다. 또 다른 페이지로 이동이 되면 쌓이고 뒤로가기 버튼을 통해 쌓인 스택을 하나 벗겨낼 수 있습니다.

https://krpeppermint100.medium.com/rn-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%84%A4%EC%9D%B4%ED%8B%B0%EB%B8%8C-%EB%84%A4%EB%B9%84%EA%B2%8C%EC%9D%B4%EC%85%98-1-stack-navigation-1b6f3b5d1e3d

​

MainScreen과 WirteScreen을 넣어준다

버튼을 누르면 MainScreen 위에(stack) WriteScreen이 뜨겠지?

​

yarn add @react-navigation/stack

 

3. App.js수정

원본 코드처럼

<NavigationContainer>

        <RootStack>

​

이런 식으로 해볼 예정

 

 

---

Error: Unable to resolve module @react-navigation/native-stack from D:\calendar17\screens\RootStack.js: @react-navigation/native-stack could not be found within the project or in these directories:

node_modules

1 | import React from 'react';

> 2 | import {createNativeStackNavigator} from '@react-navigation/native-stack';

| ^

3 | import MainScreen from './MainScreen';

4 | import WriteScreen from './WriteScreen';

5 |

at ModuleResolver.resolveDependency (D:\calendar17\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:158:15)

at DependencyGraph.resolveDependency (D:\calendar17\node_modules\metro\src\node-haste\DependencyGraph.js:231:43)

at Object.resolve (D:\calendar17\node_modules\metro\src\lib\transformHelpers.js:129:24)

at resolve (D:\calendar17\node_modules\metro\src\DeltaBundler\traverseDependencies.js:396:33)

at D:\calendar17\node_modules\metro\src\DeltaBundler\traverseDependencies.js:412:26

at Array.reduce (<anonymous>)

at resolveDependencies (D:\calendar17\node_modules\metro\src\DeltaBundler\traverseDependencies.js:411:33)

at processModule (D:\calendar17\node_modules\metro\src\DeltaBundler\traverseDependencies.js:140:31)

at async addDependency (D:\calendar17\node_modules\metro\src\DeltaBundler\traverseDependencies.js:230:18)

at async Promise.all (index 0)

https://stackoverflow.com/questions/73009226/react-navigation-native-could-not-be-found-within-the-project-or-in-these-direct

react-navigation/native could not be found within the project or in these directories: node_modules

 

나도 뭔가 node_module 어쩌구 하는거 보고

install해볼까 싶긴 했는데

일단 해보겠음

실패

yarn add @react-navigation/native

했었는데...

하라고 나와서 일단 다시 해보겠음

실패

Unable to resolve "@react-navigation/native-stack" from "screens\RootStack.js"

yarn add @react-navigation/native-stack

​

Unable to resolve "./contexts/LogContext" from "screens\MainScreen.js"

import {LogContextProvider} from './contexts/LogContext';

경로 맞는데 뭐가 잘못된거죠ㅠㅠㅠ

LogContext에 LogContextProvider도 있는데요,,

그럼 다시 처음으로 돌아가서

LogContext는 왜 넣었을까?

무슨 역할을 할까?

*context api

: 기존 내비게이션을 사용하지 않을 때는 데이터를 다른 컴포넌트에 전달하기 위해 props를 사용했다

이 프로젝트에서는 WriteScreen에 새 글을 작성하면

FeedsScreen과 CalendarScreen에 변화가 반영되어야 한다

내비게이션 사용 시 props를 통해 작업하는건 복잡

이 때 context api사용, 특정 값이 필요한 컴포넌트끼리 쉽게 값을 공유

새로운 context를 만들 때는 createContext함수 사용

https://stackoverflow.com/questions/40985027/unable-to-resolve-module-in-react-native-app

Unable to Resolve Module in React Native App

https://github.com/facebook/react-native/issues/1924

[Packager] Command or flag to clean cache · Issue #1924 · facebook/react-native

function MainScreen() {
  return (
    <View style={styles.container}>
      <LogContextProvider>
        <View style={styles.header}>
        <Text style={{fontSize: 25, alignItems: 'center',}}>Schedule</Text>
        </View>
        <View style={styles.contents}>
          <CalendarScreen />
        </View>
        <View style={styles.footer}>
          <FeedsScreen />
        </View>
      </LogContextProvider>
    </View>
  );
}

에서 LogContextProvider 위치를 바꿔볼까...

가 아니라

MainScreen을 새로 만들어

캘린더 스크린과 피드 스크린을 합쳤음

원래는 이 작업을 App.js에서 했음

그걸 그냥 복사해왔는데

그러면서 App.js에 있어야할 LogContext까지 MainScreen으로 가져옴

혹시 이것 때문일까 싶어

MainScreen에서 LogContext를 지움

​

근데 expo는 모든 오류를 한 번에 볼 수는 없나요..

한 번 로딩할 때 마다 한 두개씩 보이니까

답답해 죽을 것 같음

​

Unable to resolve "react-native-screens" from "node_modules\@react-navigation\native-stack\src\views\NativeStackView.native.tsx"

https://stackoverflow.com/questions/59473715/unable-to-resolve-module-react-native-screen

Unable to resolve module 'react-native-screen'

혹시나 해서

yarn add react-native-screens

하고 나니까 node_module에서 빨간 줄이 사라지는데

설마 나 yarn add도 안 했던건가..?

​

이것저것 계속 고치다보니

잠깐 화면이 뜨긴 했음

완벽하진 않지만,,

근데 또 새로운 오류가 등장

Error: crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported

"getRandomValues() 지원되지 않음"

이 오류는 표준 crypto.getRandomValues() API가 지원되지 않는 환경에서 발생합니다. 이 문제는 적절한 폴리필을 추가하여 해결할 수 있습니다.

npm install react-native-get-random-values

yarn add react-native-get-random-values

LogContext에

import {v4 as uuidv4} from 'uuid';

가 있어서

솔루션에 나온대로 그 위에

import 'react-native-get-random-values';

를 추가해줬다

 

 

그랬더니...

드디어!!!!!!!!!!!!!!!!!!!!

UI는 좀 더 손봐야겠다

왜 죄다 가운데 정렬이 된건지,,

styles.container에 가운데정렬해놨나봄

 

 

---

이제 d-day를 만들어야하는데...

[일단 만드는 JS] 기념일 계산기 (velog.io)

[JavaScript] D-day 계산 (velog.io)

https://velog.io/@a_in/React-D-day-Calculator

[React] - D-day 계산기

마지막 이 링크를 웹이 아니라 앱으로 열 수 있는 방법을 모색해봐야겠다,,