import React  from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native'

export default function LoginScreen(props) {
    return (
        <View style={styles.container}>
            <Text>It's LoginScreen!</Text>
            <TouchableOpacity title="Login" onPress={() => _doLogin(props)}>
                <Text>Login</Text>
            </TouchableOpacity>
        </View>
    );
}


//페이지 이동 -> navigation.navigate(이동할 페이지)
function _doLogin(props){
    props.navigation.navigate('MainTabNavigator');
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
}) 

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function MainScreen() {
    return (
        <View style={styles.container}>
            <Text>It's Main!</Text>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
}) 

import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import { createStackNavigator } from 'react-navigation-stack';



export default function PlaceScreen(props) {
    return (
        <View style={styles.container}>
            <Text>It's Place!</Text>
            <TouchableOpacity title="MovePlaceDetail" onPress={() => _goPlaceDetail(props)}>
                <Text>
                    Move to DetailView
                </Text>
            </TouchableOpacity>
        </View>
    );
}
//장소페이지에서 장소디테일페이지로 이동
function _goPlaceDetail(props){
    props.navigation.navigate('PlaceDetail');
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
})

...Main과 동일
export default function ActivityProgramScreen() {
    return (
        <View style={styles.container}>
            <Text>It's Activity and Program!</Text>
        </View>
    );
}
...Main과 동일

import React from 'react';
import { Platform } from 'react-native';
import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';

//스택네비게이션에 등록할 screen들을 불러오기
import MainScreen from '../screens/MainScreen';
import PlaceScreen from '../screens/PlaceScreen';
import PlaceDetailScreen from '../screens/PlaceDetailScreen'
import APScreen from '../screens/APScreen';



const config = Platform.select({
  web: { headerMode: 'screen' },
  default: {},
});

//MainStack이라는 이름으로 StackNavigator를 만듭니다.
//이 때, MainScreen화면을 Main이라는 이름으로 등록합니다.
const MainStack = createStackNavigator(
  {
    Main: MainScreen,
  },
  config
);

MainStack.navigationOptions = {
  tabBarLabel: 'Main',
};

MainStack.path = '';

//PlaceStack에는 2가지의 화면을 등록했습니다.
//왜냐하면 장소페이지에서 버튼을 누르면 장소상세보기로 넘어가야하기 때문입니다.
const PlaceStack = createStackNavigator(
  {
    Place: PlaceScreen,
    PlaceDetail : PlaceDetailScreen,
  },
  config
);

PlaceStack.navigationOptions = {
  tabBarLabel: 'Place',
};

PlaceStack.path = '';

//장소상세보기로 넘어갔을 때 하단 탭이 안보이도록 하는 기능 구현
PlaceStack.navigationOptions = ({ navigation }) => {
  let tabBarVisible = true;
  if (navigation.state.index > 0) {
    tabBarVisible = false;
  }

  return {
    tabBarVisible,
  };
};

const APStack = createStackNavigator(
  {
    AP: APScreen,
  },
  config
);

APStack.navigationOptions = {
  tabBarLabel: 'AP',
};

APStack.path = '';

//각각의 화면들리 등록된 스택으로 tanNavigator라는 하단tab을 만듭니다.
const tabNavigator = createBottomTabNavigator({
  MainStack,
  PlaceStack,
  APStack,
});

tabNavigator.path = '';

//하단 tab을 만들었지만 하단 tab만이 전체 화면이 아닙니다.
//따라서, MainNav라는 이름의 전체화면 동작하고 tabNavigator를 갖는 스택네비게이터를 만들어야합니다.
//tabNavigator를 export하면 하단tab만 생기는 꼴이겠죠..!
const MainNav = createStackNavigator({
  tabNavigator: {
    screen: tabNavigator,
    navigationOptions: ({navigation}) => ({
      header: null,
    })
  }
})


export default MainNav;

<TouchableOpacity title="Login" onPress={() => _doLogin(props)}>
    <Text>Login</Text>
</TouchableOpacity>
...
function _doLogin(props){
    props.navigation.navigate('MainTabNavigator');
}

import React from 'react';
import LoginScreen from '../screens/LoginScreen';
import { createAppContainer, createSwitchNavigator } from 'react-navigation';

import MainTabNavigator from './MainTabNavigator';

export default createAppContainer(
  createSwitchNavigator({
    LoginScreen,
    MainTabNavigator,
  },
  {
    initialRouteName: 'LoginScreen',
  }
  )
);

import React from 'react';
import { StyleSheet, View } from 'react-native';
import AppNavigator from './navigation/AppNavigator';


export default function App() {
  return (
      <AppNavigator/>
  );
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

import React from 'react';
import { View, Text } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
      </View>
    );
  }
}

class DetailsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
      </View>
    );
  }
}

const AppNavigator = createStackNavigator(
  {
    Home: HomeScreen, /*Homescreen 컴포넌트를 네비게이터에 등록*/
    Details: DetailsScreen, /*DetailsScreen 컴포넌트를 네비게이터에 등록*/
  },
  {
    initialRouteName: 'Home',
  }
);
/*
Home과 Details이라는 2개의 route가 생성되었다.
Home route(key)는 HomeScreen 컴포넌트(value)에 해당하고, Details route(key) 는 DetailsScreen(value)에 해당*/

const AppContainer = createAppContainer(AppNavigator); 
/*네비게이터를 사용하기 위해서는 createAppContainer로 반환해야 한다*/

export default class App extends React.Component {
  render() {
    return <AppContainer />; /*AppContainer 컴포넌트를 반환한다*/
  }
}

import React from 'react';
import { Button, View, Text } from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation';

   class HomeScreen extends React.Component {
      render() {
        return (
          <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Text>Home Screen</Text>
            <Button
              title="Go to Details"
              onPress={() => this.props.navigation.navigate('Details')} 
            />
          </View>
        );
      }
    }

 <Button
     title="Go to Details... again"
      onPress={() => this.props.navigation.push('Details')}
 />

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
        <Button
          title="Go to Details"
          onPress={() => {
            /* Details route로 넘겨줄 때 파라미터로 값을 넣어준다 */
            this.props.navigation.navigate('Details', {
              itemId: 86,
              otherParam: 'anything you want here',
            });
          }}
        />
      </View>
    );
  }
}

class DetailsScreen extends React.Component {
  render() {
    /* 파라미터 내용을 가져온다 */
    const { navigation } = this.props;
    const itemId = navigation.getParam('itemId', 'NO-ID');
    const otherParam = navigation.getParam('otherParam', 'some default value');

    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
        <Text>itemId: {JSON.stringify(itemId)}</Text>
        <Text>otherParam: {JSON.stringify(otherParam)}</Text>
        <Button
          title="Go to Details... again"
          onPress={() =>
            this.props.navigation.push('Details', {
              itemId: Math.floor(Math.random() * 100),
            })
          }
        />
        <Button
          title="Go to Home"
          onPress={() => this.props.navigation.navigate('Home')}
        />
        <Button
          title="Go back"
          onPress={() => this.props.navigation.goBack()}
        />
      </View>
    );
  }
}