navigator

stack navigation

stack navigation은 component에 페이지 기능을 부여해주고 component에서 component로 이동 -> 페이지 이동이 가능하게 해줌

🔔 Stack.Navigator에 페이지(Stack.Screen)을 등록시켜 언제든지 페이지 이동이 가능하게 해준다.

navigation/StackNavigator.js

const Stack = createStackNavigator();

const StackNavigator = () => {
  return (
    //컴포넌트들을 페이지처럼 여기게끔 해주는 기능을 하는 네비게이터 태그를 선언
    //Stack.Navigator 태그 내부엔 페이지(화면)를 스타일링 할 수 있는 다양한 옵션들이 담겨 있습니다.
    <Stack.Navigator
      screenOptions={{
        headerStyle: {
          backgroundColor: "white",
          borderBottomColor: "white",
          shadowColor: "white",
          height: 100,
        },
        headerTitleAlign: "left",
        headerTintColor: "#000",
        headerBackTitleVisible: false,
      }}
    >
      {/* 컴포넌트를 페이지로 만들어주는 엘리먼트에 끼워 넣습니다. 이 자체로 이제 페이지 기능을 합니다*/}
      <Stack.Screen name="MainPage" component={MainPage} />
      <Stack.Screen name="DetailPage" component={DetailPage} />
      <Stack.Screen name="AboutPage" component={AboutPage} />
      <Stack.Screen name="LikePage" component={LikePage} />
    </Stack.Navigator>
  );
};

App.js

//모든 페이지 컴포넌트들이 끼워져있는 책갈피를 메인에 둘예정이므로 컴포넌트를 더이상 불러오지 않음
 return ( 
  <NavigationContainer>
    <StatusBar style="black" />
    <StackNavigator/>
 </NavigationContainer>);
}

페이지 이동하기

페이지 이동을 위해선 책갈피가 페이지들에게 부여해준 페이지 이동 기능을 사용해야한다.

Stack.screen에 등록된 모든 페이지 컴포넌트들을 navigation과 route라는 속성으로 넘겨받아 사용이 가능하다.

// route 딕셔너리는 데이터를 전달받는다.
const {title} = route.params

//해당 페이지 제목 설정
navigation.setOptions({title:'나만의 꿀팁'})

//Stack.screen에서 name속성으로 정해준 이름을 지정해주면 해당 페이지로 이동
navigation.navigate('name')

// name과 데이터 동시에 전달
navigation.navigate('name',{title})