Expo11 [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] 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 2 3 다음
