1. AuthNavagation

  • AuthHome
  • Login
  • Signup
  • Confirm

위 네가지 컴포넌트를 가지고 있는 Navigation입니다.

2. MainNavigation

2-1. TabNavigation

  • Home
  • Search
  • Notifications
  • Profile

위 네가지 컴포넌트를 가지고 있는 Navigation입니다.

2-2. PhotoNavigation

  • photoTabs

    • TakePhoto
    • selectPhoto

    이것들은 topTabNavigation으로 사용됩니다.

  • UpLoad

    • 이미지를 업로드하는 컴포넌트입니다.

photo Tab과 upload를 하나의 stackNavigation으로 만들어 사용합니다.

2-3. MessagesNavigation

  • Messages
  • Message

흐름도

tabnavigation의 add를 누르면

  navigationOptions: {
      tabBarOnPress: ({ navigation }) => {
        navigation.navigate("PhotoNavigation");
      }
    }

.navigate()로 이동 할 수 있는 곳은 해당 navigation안에 정의한 Route로만 이동가능하다.

따라서

const MainNavigation = createStackNavigator(
  {
    TabNavigation,
    PhotoNavigation,
    MessagesNavigation
  },
  {
    headerMode: "none"
  }
);

위에 존재하는 Navigation이 아니면 이동할 수 없음. ( 정해진 Router가 아닌 경우 이동할 수 없는 사황과 비슷함. )

photoNavigation으로 이동하면 어느 화면을 보여주는가 ?

PhotoNavigation.js

import {
  createStackNavigator,
  createMaterialTopTabNavigator
} from "react-navigation";
import TakePhoto from "../screens/Photo/TakePhoto";
import SelectPhoto from "../screens/Photo/SelectPhoto";
import UpLoad from "../screens/Photo/UpLoad";
const PhotoTabs = createMaterialTopTabNavigator(
  {
    TakePhoto,
    SelectPhoto
  },
  {
    tabBarPosition: "bottom"
  }
);

export default createStackNavigator({
  PhotoTabs,
  UpLoad
});

PhotoNavigation.js에서 initailScreen이 TakePhoto이기 때문에 TakePhoto를 보여줌. 즉, 해당 Navigation으로 이동하면 그 navigation이 보여주기로한 screen을 보여주는 것임.