앱개발 강의 3주차 Note - (3) 앱 네비게이터, 스택 네비게이션

[Expo 앱다운 앱기능] 앱 상태 바(Status Bar) 관리

 

스마트폰 맨 위 상태바.

 

expo install expo-status-bar 로 설치하자.

 

 

[앱 페이지 적용] 네비게이터

 

네비게이터. 앱에서 만든 컴포넌트들을 페이지화 하고,

페이지들끼리 이동 가능하게해주는 라이브러리

 

네비게이션 설치 코드

yarn add @react-navigation/native

 

네이게이션 추가 설치코드

expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

 

 

[앱 페이지 적용] 설치 - 스택네비게이션 01

 

필요한 탭버튼 이동방식이나 페이지끼리의 이동 등 가지치기 도구를 또 설치해야한다. (스택네비게이션)

 

앱은 페이지가 쌓이는 구조다.

스택이 쌓다라는 의미. 한커풀 한커풀 쌓고 뒤로갈 수 있는 구조

 

yarn add @react-navigation/stack

스택 네비게이션 설치 후,

 

디렉토리에 navigation 폴더를 하나 만들자.

그리고 StackNavigator.js 파일 만들기.

 

코드스니펫으로 가져오면.

크게 Stack.Navigator와 Stack.Screen으로 이루어져있다.

 

Navigator는 책갈피역할, Screen은 각 페이지들

페이지들이 모이면 책이 된다. 책이 완성되고 페이지 이동될텐데. 책갈피가 필요하다.

 

그리고 이 함수를 밖에서 쓸 수 있게 export 하고있다.(맨 아래)

 

App.js 를 붙여넣으니, 위에 검정색 바가 생겼다.

App.js는 앱 화면을 그려주는 앤데, 얘한테 네비게이션을 주었다. 각 페이지를 리턴하지 않고, Navigation Container가 들어갔다.

 

[앱 페이지 적용] 페이지 헤더 스타일 수정 - 스택 네비게이션2

 

네비게이션의 black 배경을 좀 바꿔보자.

 

StackNavigator에서 headerStyle 변경해주기.

 

[앱 페이지 적용] 페이지 이동하기 - 스택 네비게이션 3

 

StackNavigator에서, 아래 

<Stack.Screen name="MainPage" component={MainPage}/>

<Stack.Screen name="DetailPage" component={DetailPage}/>

 

속성 값이 들어가있다. 이렇게 해주면 어디서든 이 속성을 쓸 수 있다.

Stack.screen에 등록된 모든 페이지 컴포넌트들은 navigation과 route라는 딕셔너리를 속성으로 넘겨받아 쓸 수 있다.

 

다른곳에서  name 속성으로 정해준 이름을 쓰면 된다.

 

MainPage.js에서, navigation과 route를 비구조할당 방식으로 쓴다.

 

export default function MainPage({navigation,route}) {

 

카드부분에서, 하나 누르면 상세페이지로 이동해야한다.

그래서 아래 부분이 생겼다.

return (<Card content={content} key={i} navigation={navigation}/>)

 

 

페이지는 이동되는데, 데이터가 실제로 안넘어가고있다.

DetailPage 코드를 변경해야한다. 넘어온 데이터를 받을 수 있게.

 

데이터가 없을 때 오류나는 것을 방지하는 법?

의미없는 초기값을 넣어놓거나 (detailpage 코드처럼)

아니면 로딩화면을 넣어놓으면 된다.

 

---

 

[Expo 앱다운 앱기능1] 페이지 내용 공유하기

 

팁 공유하기 버튼을 하나 만드려고한다.

 

const share = () => {

        Share.share({

            message:`${tip.title} \n\n ${tip.desc} \n\n ${tip.image}`,

        });

    }

 

공유하고 싶은 내용을 키값에 넣었다. 백틱을 썼다.

넘겨받은 title과 desc를 넣었다.

백틱은 띄어쓰기 엔터를 다 구분하기에 \n 이것도 필요없다 사실.

 

 

[Expo 앱다운 앱기능2] 외부 링크 클릭 이벤트

 

더 자세한 내용을 보러가기를 누르면 외부 링크로 이동하는 것

 

Linking 도구를 설치해야한다.

 

expo install expo-linking

그리고 설치하면 import를 해줘야한다.

(DetailPage에 넣기)

 

link라는 함수를 쓸 수 있다. Linking안에 openURL이라는 도구를 쓸 수 있는데, url 바로 쓸 수 있다.