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

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

 

이번 포스팅은 앱에서 화면 간 이동을 시켜주는 navigation에 관련된 포스팅입니다. 

 

react native에서 제공하는 여러 기능들이 있지만 저는

 

stack navigation

 

Top Tab navigation

 

Bottom Tab navigation

 

을 사용하여 앱을 구성하도록 하겠습니다.

 

해당 라이브러리를 설치하기 위해선 Terminal에서 해당 라이브러리를 설치해줍니다. 

 

npm install @react-navigation/native

 

npx expo install react-native-screens react-native-safe-area-context

 

npm install @react-navigation/bottom-tabs

 

npm install @react-navigation/stack

 

npm install @react-navigation/material-top-tabs react-native-tab-view

 

npx expo install react-native-pager-view

 

npx expo install react-native-gesture-handler

 

4번째 stack 라이브러리는 react native에서 제공하는 

 

npm install @react-navigation/native-stack을 사용하지 않고 위의 라이브러리를 사용하였습니다.

 

그리고 마지막 라이브러리는 나중에 사용할 라이브러리라 미리 설치를 해줍니다. 

 

이번 포스팅은 Stack navigation을 사용하여 화면 간 이동하는 소스를 만들어 보겠습니다. 

 

 

 

VS Code를 열어 App.js 파일을 열어 수정합니다.

 

 

import React from 'react';

import Navigation from './Navigation';

export default function App() {

  return (

    <Navigation />

  );

}

 

 

그리고 Navigation.js 파일을 만들어줍니다.

 

 

그리고 screens 폴더를 만들고 아래의 파일들을 만들어줍니다.

 

splash.js

 

signin.js

 

kakaoLogin.js

 

signup.js

 

home.js

 

 

해당 파일 생성 후 각 파일에 소스를 작성해줍니다.

 

먼저 Navigation.js 파일입니다.

 

import React from 'react';

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

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

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';

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={Home} />

    </Stack.Navigator>

  );

}

function Navigation() {

  return (

    <NavigationContainer>

      <StackScreen />

    </NavigationContainer>

  );

}

export default Navigation;

 

 

splash.js 

import React from "react";

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

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

const Splash = () => {

  const navigation = useNavigation();

  return (

    <View style={Styles.container}>      

      <Text style={Styles.HomeText}>스플래시 화면</Text>

      <TouchableOpacity

          onPress={() => navigation.navigate("Signin", { screen: 'Signin' })}

          style={Styles.NextBottom}

        >

          <Text style={Styles.BottomText}>로그인 화면으로</Text>

        </TouchableOpacity>

    </View>

  )

}

export default Splash;

const Styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#fff',

  },

  HomeText: {

    fontSize: 30,

    textAlign: "center",

  },

  NextBottom: {

    backgroundColor: "purple",

    padding: 10,

    marginTop: "20%",

    width: "50%",

    alignSelf: "center",

    borderRadius: 10,

  },

  BottomText: {

    fontSize: 15,

    color: 'white',

    textAlign: "center",

  }

})

 

signin.js 

 

import React from "react";

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

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

const Signin = () => {

  const navigation = useNavigation();

  return (

    <View style={Styles.container}>      

      <Text style={Styles.HomeText}>로그인 화면</Text>

      <TouchableOpacity

          onPress={() => navigation.navigate("KaKaoLogin", { screen: 'KaKaoLogin' })}

          style={Styles.NextBottom}

        >

          <Text style={Styles.BottomText}>카카오 화면으로</Text>

        </TouchableOpacity>

    </View>

  )

}

export default Signin;

const Styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#fff',

  },

  HomeText: {

    fontSize: 30,

    textAlign: "center",

  },

  NextBottom: {

    backgroundColor: "purple",

    padding: 10,

    marginTop: "20%",

    width: "50%",

    alignSelf: "center",

    borderRadius: 10,

  },

  BottomText: {

    fontSize: 15,

    color: 'white',

    textAlign: "center",

  }

})

 

 

kakaoKogin.js 

 

import React from "react";

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

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

const KaKaoLogin = () => {

  const navigation = useNavigation();

  return (

    <View style={Styles.container}>      

      <Text style={Styles.HomeText}>카카오 화면</Text>

      <TouchableOpacity

          onPress={() => navigation.navigate("Signup", { screen: 'Signup' })}

          style={Styles.NextBottom}

        >

          <Text style={Styles.BottomText}>회원가입 화면으로</Text>

        </TouchableOpacity>

    </View>

  )

}

export default KaKaoLogin;

const Styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#fff',

  },

  HomeText: {

    fontSize: 30,

    textAlign: "center",

  },

  NextBottom: {

    backgroundColor: "purple",

    padding: 10,

    marginTop: "20%",

    width: "50%",

    alignSelf: "center",

    borderRadius: 10,

  },

  BottomText: {

    fontSize: 15,

    color: 'white',

    textAlign: "center",

  }

})

 

 

signup.js 

 

import React from "react";

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

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

const Signup = () => {

  const navigation = useNavigation();

  return (

    <View style={Styles.container}>      

      <Text style={Styles.HomeText}>회원가입 화면</Text>

      <TouchableOpacity

          onPress={() => navigation.navigate("Home", { screen: 'Home' })}

          style={Styles.NextBottom}

        >

          <Text style={Styles.BottomText}>홈 화면으로</Text>

        </TouchableOpacity>

    </View>

  )

}

export default Signup;

const Styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#fff',

  },

  HomeText: {

    fontSize: 30,

    textAlign: "center",

  },

  NextBottom: {

    backgroundColor: "purple",

    padding: 10,

    marginTop: "20%",

    width: "50%",

    alignSelf: "center",

    borderRadius: 10,

  },

  BottomText: {

    fontSize: 15,

    color: 'white',

    textAlign: "center",

  }

})

 

 

home.js 

 

import React from "react";

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

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

const Home = () => {

  const navigation = useNavigation();

  return (

    <View style={Styles.container}>      

      <Text style={Styles.HomeText}>홈 화면</Text>

      <TouchableOpacity

          onPress={() => navigation.navigate("Splash", { screen: 'Splash' })}

          style={Styles.NextBottom}

        >

          <Text style={Styles.BottomText}>스플래시 화면으로</Text>

        </TouchableOpacity>

    </View>

  )

}

export default Home;

const Styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#fff',

  },

  HomeText: {

    fontSize: 30,

    textAlign: "center",

  },

  NextBottom: {

    backgroundColor: "purple",

    padding: 10,

    marginTop: "20%",

    width: "50%",

    alignSelf: "center",

    borderRadius: 10,

  },

  BottomText: {

    fontSize: 15,

    color: 'white',

    textAlign: "center",

  }

})

 

 

 

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

 

 

 

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