[expo] 5. expo로 앱 만들기 - 화면 간 이동 navigation - 2

안녕하세요 프시케입니다.

 

이번 포스팅은 저번 포스팅에 이어 앱에서 화면 간 이동하는 소스를 만들어 보겠습니다. 

 

저번 포스팅에선 Stack만 사용하여 화면간 이동하는 소스를 만들었는데 

 

이번 포스팅에선  Top-Tab과 Bottom-Tab을 사용하여 화면간 이동하는 소스를 만들어 보겠습니다.

 

홈 화면에서 Top-Tab과 Bottom-Tab으로 구성된 화면들입니다. 

 

각각의 screen 파일들을 screens 폴더에 만들어줍니다.

 

Screen1.js

 

Screen2.js

 

Screen3.js

 

Screen4.js

 

Screen5.js

 

Screen6.js

 

 

 

 

다음으로 Navigation.js 파일을 수정합니다.

 

 

 

 

 

해당 Navigation.js 전체 소스입니다.

 

import React from 'react';

import { createStackNavigator } from '@react-navigation/stack';

import { NavigationContainer } from "@react-navigation/native";

import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";

import Splash from './screens/splash';

import Signin from './screens/signin';

import Signup from './screens/signup';

import KaKaoLogin from './screens/kakaoLogin';

import Home from './screens/home';

import Screen1 from './screens/screen1';

import Screen2 from './screens/screen2';

import Screen3 from './screens/screen3';

import Screen4 from './screens/screen4';

import Screen5 from './screens/screen5';

import Screen6 from './screens/screen6';

const Stack = createStackNavigator();

function StackScreen() {

  return (

    <Stack.Navigator

      initialRouteName="Splash"

    >

      <Stack.Screen name="Splash" component={Splash} />

      <Stack.Screen name="Signin" component={Signin} />

      <Stack.Screen name="KaKaoLogin" component={KaKaoLogin} />

      <Stack.Screen name="Signup" component={Signup} />

      <Stack.Screen name="Home" component={BottomStack} />

    </Stack.Navigator>

  );

}

const TopTab = createMaterialTopTabNavigator();

function Top1() {

  return (

    <TopTab.Navigator>

      <TopTab.Screen name="Top1 Screen1" component={Screen1} />

      <TopTab.Screen name="Top1 Screen2" component={Screen2} />

    </TopTab.Navigator>

  )

}

function Top2() {

  return (

    <TopTab.Navigator>

      <TopTab.Screen name="Top2 Screen4" component={Screen4} />

      <TopTab.Screen name="Top2 Screen5" component={Screen5} />

      <TopTab.Screen name="Top2 Screen6" component={Screen6} />

    </TopTab.Navigator>

  )

}

const BottomTab = createBottomTabNavigator();

function BottomStack() {

  return (

    <BottomTab.Navigator>

      <BottomTab.Screen name="Top1" component={Top1} />

      <BottomTab.Screen name="Bottom" component={Screen3} />

      <BottomTab.Screen name="Top2" component={Top2} />

    </BottomTab.Navigator>

  );

}

function Navigation() {

  return (

    <NavigationContainer>

      <StackScreen>

        <BottomStack />

      </StackScreen>

    </NavigationContainer>

  );

}

export default Navigation;

 

 

다음으로 각 Screen의 파일을 수정합니다.

 

Screen1.js

 

import React from "react";

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

const Screen1 = () => {

  return (

    <View style={Styles.container}>      

      <Text style={Styles.HomeText}>Screen1</Text>

    </View>

  )

}

export default Screen1;

const Styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#fff',

  },

  HomeText: {

    fontSize: 35,

    textAlign: "center",

  },

})

 

 

Screen2.js, Screen3.js, Screen4.js, Screen5.js, Screen6.js 모두 수정해줍니다.

 

마지막으로 home.js 파일을 수정합니다.

 

import React from "react";

import { View } from "react-native";

const Home = () => {

  return (

    <View>

    </View>

  )

}

export default Home;

 

 

해당 소스로 만들어진 화면들입니다.

 

 

이번 포스팅은 여기서 마치겠습니다.