React | Stack.Navigator를 만들어보자!

네비게이션을 만들어보자!

스택네비게이터

Navigator 안에 Screen으로 구성된다.

• 설치 후 임포트해서 사용한다.

import { createStackNavigator } from '@react-navigation/stack';

• 스택이라는 변수에 네비게이션 함수를 담아서 사용한다.

const Stack = createStackNavigator();

 

• 스택 스크린은 각각의 컴포넌트를 페이지화 시킨다.

각각의 컴포넌트는 페이지가 아니다! (중요)
카테고리안에 넣어주기 위해선 페이지화하는 과정이 필요하다. (아래 코드)

<Stack.Screen component={MainPage}/>

 

 

• 네비게이션을 App.js에서 사용하기 위해서 스택 네비 함수를 다른 페이지에서도 사용할 수 있도록 export 해준다.

export default StackNavigator;

 

(App.js 화면에서 사용한 모습 (아래))

import {NavigationContainer} from '@react-navigation/native';
import StackNavigator from './pages/navigation/StackNavigator';

• 스택 네비 함수를 다른 페이지에서도 사용할 수 있도록 export 해준다.

export default function App() {
  console.disableYellowBox = true;

  return ( 
  <NavigationContainer>
    <StatusBar style="black" /><StackNavigator/>
 </NavigationContainer>);
}

 

Navigation과 route 의 정체

• 페이지 이동하는 법 (속성값으로 넣는다)

navigation.navigate('DetailPage')

• 페이지 이동할 때 데이터도 건네주는 법

{navigation.navigate('DetailPage',{idx:content.idx})}

인덱스값도 가져가라~

 

• 페이지 이동시 받은 데이터를 꺼내쓰는 법 = route !! 중요해

(디테일페이지 (아래))

navigation.setOptions({
            title:route.params.title,
            headerStyle: {
                backgroundColor: '#000',
                shadowColor: "#000",
            },
            headerTintColor: "#fff",
        })
        //넘어온 데이터는 route.params에 들어 있습니다.
        const { idx } = route.params;
        firebase_db.ref('/tip/'+idx).once('value').then((snapshot) => {
            let tip = snapshot.val();
            setTip(tip)
        });