[React Native] createStackNavigator를 사용해 다른 페이지로 이동하도록 하는 방법

 createStackNavigator를 사용해 한 페이지 내에서를 사용해 다른 페이지로 넘어갈 수 있게 할 수 있다.

그리고 아래처럼 만들어진 MainNavigation을 컴포넌트의 시작값으로 넣는다.

const MainNavigation = createStackNavigator({
    Home:{
        screen: App
    },
    TestPage: {
        screen: Test
    }
});

export default MainNavigation;


AppRegistry.registerComponent('Practice2', () => MainNavigation);

---

createStackNavigator를 추가하면 화면 상단에 기본 헤더가 생성되는데, 만약 이 헤더를 지우고 싶다면,

Home: {
    screen: App,
    navigationOptions:{
        header:null
    }
},

이렇게 navigationOptions에 header:null을 넣어서 헤더를 지워버릴 수 있다.

 

---

이후 한 페이지에서 다른 페이지로 넘어가고 싶다면

this.props.navigation.navigate("TestPage");

이처럼 navigate를 사용해 이동하길 원하는 페이지를 입력하면 그 페이지로 이동하게 된다.

 

---

또한, 이전 페이지로 돌아가고 싶다면

this.props.navigation.goback();

이렇게 뒤로 돌아갈수있다.