[react-native] EXPO로 시작해보기 11 - 페이지이동하기(react-navigation)

expo로 진행하는 프로젝트로 페이지 이동을 위해서는 react-navigation 를 사용해 진행합니다. 

 

설치 

>> npm install react-navigation
>> expo install react-native-gesture-handler react-native-reanimated

 

 

import ...
//추가
import { createStackNavigator, createAppContainer } from 'react-navigation';
//컴포넌트추가 (네비게이션에서 사용)
import TabPage from './TabPage';
import MyPage from './MyPage'

class page1 extends React.Component {
	static navigationOptions = ({ navigation }) => {
         return {
         headerTitle: '여행리스트',
         headerRight: (
                    <Button
                    //누르면 MyPage로 이동하는 헤더 오르쪽에 나타날 버튼 
                    onPress={() => navigation.navigate("MyPage")}
                    title='마이페이지'
                    color="#F07C84"
                    />
                    ),
                }
         }
    };
    render() {
    	const onPressItem = () => {
                this.props.navigation.navigate("TabPage")
            }
    	return(
        <View>
        	 <Button onPress={onPressItem} title="페이지2로 이동" color="#000" />
        </View>
        )
    
    }
}



//네비게이션생성

  const main = createStackNavigator({
  //이동할 페이지들 리스트 
    TripList: { screen: TripList},
    TabPage: { screen: TabPage },
    MyPage: { screen: MyPage },
  },
  {
    defaultNavigationOptions: {
    //기본 네비게이션 옵션 => static navigationOptions으로 옵션설정하지 않았을 때의 기본설정  
      title: '여행',
      headerTintColor: '#F07C84',
      headerStyle: {
        backgroundColor: '#ffffff',
      },
    }
  },
  );

  const App = createAppContainer(main);

 

MyPage.js

export default class MyPage extends React.Component {
    static navigationOptions = ({ navigation }) => {
        return {
            headerTitle: '마이페이지',
            
            }
      };

  render(){
      return (
        <View style={styles.container}>
            <Text>MyPage</Text>
        </View>
      
    );
  }
}

 

---

 

 

 

	static navigationOptions = ({ navigation }) => {
         return {
         headerTitle: '여행리스트',
         headerRight: (
                    <Button
                    //누르면 MyPage로 이동하는 헤더 오르쪽에 나타날 버튼 
                    onPress={() => navigation.navigate("MyPage")}
                    title='마이페이지'
                    color="#F07C84"
                    />
                    ),
                }
         }
    };

위 코드를 통해 헤더 타이틀에 여행 리스트가 들어가고, 마이페이지 버튼이 생성된다... 마이페이지로 이동하면 아래와 같은 결과를 볼 수있고,

 

static navigationOptions = ({ navigation }) => {
        return {
            headerTitle: '마이페이지',
            }
      };

위 코드를 통해 마이페이지라는 헤더 타이틀이 생성된다. 

 

 

 

 

 

헤더는 네비게이션을 사용해 페이지 이동을하면 자동으로 설정된다. 

이를 사용하고 싶지않다면 아래의 

createStackNavigator 옵션에 headerMode: none 을 추가해주면된다. 

  const main = createStackNavigator({
    TripList: { screen: TripList},
    TabPage: { screen: TabPage },
    MyPage: { screen: MyPage,
        navigationOptions : {
            header: null // 해당페이지에서 헤더를 사용하지 않음!
        }
    },
  },
  {
    defaultNavigationOptions: {
      title: '여행가계부',
      headerTintColor: '#F07C84',
      headerStyle: {
        backgroundColor: '#ffffff',
      },
    },
    //headerMod: 'none'//헤더를 사용하고 싶지 않을때 추가
  },
  );

  대신 헤더를 사용하지 않으면  뒤로가기 버튼이 생성되지 않아 필요하다면 따로 생성해 주어야 한다. 

아래에서 다양한 옵션을 확인해 필요한대로 적용가능하다 ..

 

특정 페이지에서만 헤더를 사용하고 싶지 않을때는 

해당 옵션에  다음과같은 값을 준다. 

navigationOptions : {
  header: null
}

 

 

 

https://reactnavigation.org/docs/en/stack-navigator.html#navigationoptions-used-by-stacknavigator