Navigation3 [expo] 7. expo로 앱 만들기 - 화면 간 이동 navigation - 4 안녕하세요 프시케입니다. 이번 포스팅은 저번 포스팅에 이어 Screen4~6까지 화면을 정리하는 포스팅입니다. 저번 포스팅에선 Screen4~6까지 Top-Tab을 사용하여 화면 구성을 했었는데 Top-Tab 대신 Stack navigation을 사용하여 화면을 구성하는게 좋다는 판단으로 변경하게 되었습니다. 지금까지 만들어진 화면을 보시면 Top-Tab의 기능들이 없다는 생각에 변경하게 되었습니다. navigation.js 파일을 수정합니다. Top2는 삭제하고 SettingScreen을 추가하였습니다. 그리고 BottomStack을 수정하였습니다. 해당 Navigation.js의 전체 소스입니다. import React from 'react'; import { createStackNavigator }.. 2023. 4. 15. [expo] 5. expo로 앱 만들기 - 화면 간 이동 navigation - 2 안녕하세요 프시케입니다. 이번 포스팅은 저번 포스팅에 이어 앱에서 화면 간 이동하는 소스를 만들어 보겠습니다. 저번 포스팅에선 Stack만 사용하여 화면간 이동하는 소스를 만들었는데 이번 포스팅에선 Top-Tab과 Bottom-Tab을 사용하여 화면간 이동하는 소스를 만들어 보겠습니다. 홈 화면에서 Top-Tab과 Bottom-Tab으로 구성된 화면들입니다. 각각의 screen 파일들을 screens 폴더에 만들어줍니다. Screen1.js Screen2.js Screen3.js Screen4.js Screen5.js Screen6.js 다음으로 Navigation.js 파일을 수정합니다. 해당 Navigation.js 전체 소스입니다. import React from 'react'; import { c.. 2023. 4. 14. [expo] 4. expo로 앱 만들기 - 화면 간 이동 navigation - 1 안녕하세요 프시케입니다. 이번 포스팅은 앱에서 화면 간 이동을 시켜주는 navigation에 관련된 포스팅입니다. react native에서 제공하는 여러 기능들이 있지만 저는 stack navigation Top Tab navigation Bottom Tab navigation 을 사용하여 앱을 구성하도록 하겠습니다. 해당 라이브러리를 설치하기 위해선 Terminal에서 해당 라이브러리를 설치해줍니다. npm install @react-navigation/native npx expo install react-native-screens react-native-safe-area-context npm install @react-navigation/bottom-tabs npm install @react-nav.. 2023. 4. 14. 이전 1 다음
