개발23 [expo] 8. expo로 앱 만들기 - 뒤로 가기 막기, 뒤로 가기 2번 클릭 앱종료 안녕하세요 프시케입니다. 이번 포스팅은 특정 화면에서 안드로이드 기기에 있는 뒤로 가기 버튼을 눌렀을 때 이전 화면 이동을 막는 기능과 뒤로 가기 버튼 2번 클릭을 했을 때 앱이 종료되는 기능을 구현해 보겠습니다. 구성 화면 중 Signup에서 다음 화면으로 넘어가면 Screen1의 화면이 나오게 됩니다. Screen1화면에서 뒤로 가기 버튼을 눌렀을 때 Signup으로 돌아가지 않게 하는 기능과 뒤로 가기 버튼을 2번 눌렀을 때 앱이 종료되는 기능입니다. Screen1.js해당 소스입니다. 해당 파일의 전체 소스입니다. import React from "react"; import { View, Text, StyleSheet } from "react-native"; import { BackHandler .. 2023. 4. 15. [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] 6. expo로 앱 만들기 - 화면 간 이동 navigation - 3 안녕하세요 프시케입니다. 이번 포스팅은 저번 포스팅에 이어 화면을 정리하는 포스팅을 하도록 하겠습니다. Screen1 부터 Screen6 까지 화면의 Header 부분을 수정하도록 하겠습니다. Header 부분 수정은 Navigation.js 파일에서 합니다. 먼저 Stack으로 이동되는 Header를 제거 해줍니다. 해당 소스입니다. function StackScreen() { return ( ); } 수정된 화면입니다. 다음으로 Bottom-tap navigation으로 생성된 Header를 제거와 아이콘을 넣어줍니다. 해당 소스입니다. function BottomStack() { return ( ( ), }} /> ( ), }} /> ( ), }} /> ); } 해당 소스로 만들어진 화면들입니다. .. 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. 이전 1 2 3 4 5 6 다음
