[React Native] 버튼 눌러 페이지 이동하기

탭을 구현해야 하는데 버튼을 눌러 페이지 이동하는 것을 구현해버렸다. (아아...)

두 가지 모두 react-navigation 라이브러리를 이용하여 구현할 수 있어서 금방 바꿀 수 있을 것 같다.

 

일단 구현만 해보는 것을 목표로 했기 때문에

블로그의 코드를 그래도 써보았고 그 과정에서 나온 에러들을 정리하고자 한다.

 

 

1. bundle 자체가 진행되지 않는 에러 (time out error)

 

expo를 사용하여 기기에서 코드를 확인하고 싶은 경우 

expo를 실행한 노트북과 코드를 확인할 기기가 같은 네트워크에 연결되어있어야 한다.

나는 확인도 안 하고 휴대폰은 데이터를 켜놓고 노트북은 와이파이에 연결되어 있어 계속 time out 에러가 발생했다.

왜 안되지.. 왜 안되지.. 30분을 찾다가 휴대폰이 와이파이에 연결되어있지 않은 것을 확인..

연결하자마자 잘 되었다. 휴..

 

2. buliding javascript bundle error

 

이 에러가 나는 여러가지 이유가 있을 수 있겠지만,

나의 경우 이 에러와 함께 import 코드 중 resolve 할 수 없는 코드들이 있다고 함께 에러가 났었다.

해당 라이브러리를 모두 설치하고 실행하자 오류 해결.. 

보통 'npm i [라이브러리]' 이렇게 하면 잘 설치되었다.

 

3. tried to register two view with the same name

 

왜 오류가 발생한지 모르겠으나.. 

이것을 보고 해결..

'expo install react-native-safe-area-context' 설치하니 엄청난 설치 파일들과 함께 오류가 해결되었다.

 

4. undefined is not a function '(0, _reactNavigation.StackNavigator)' is undefined)

 

StackNavigator를 사용하여 난 오류.

요즘은 createStackNavigator를 사용한다고 한다.

해결 방법   

 

5. createstacknavigator has been moved to react navigation stack

 

간단히 수정하면 된다.

import {createStackNavigator} from 'react-navigation-stack'

 

6. InitialRouteName: undefined is not an object in evaluating routeConfigs[InitialRouteName].params

 

createStackNavigator를 생성할 때 initialRouteName을 잘못 설정해주어 생긴 오류.

나 같은 경우엔 주석 처리하였지만, '' 사이에 initial screen을 넣으면 해결될 것 같다.

해결 방법 

 

 

이렇게 해서 간단히 Mypage를 누르면 Mypage로 screen 이동하는 코드 완성.

혜린시랑 코드를 합치다가 또 오류 잔뜩이지만.. 아마 라이브러리 미설치로 인한 오류가 아닌가 싶다.

이제는 빨간 글을 봐도 무섭지 않은 지경에 이르렀다.

그래도 뭔가 시작은 했구나.. 해서 보람차다

 

탭으로 바꿔야지.. 흐긓ㄱ