개발/expo
[expo] 4. expo로 앱 만들기 - 화면 간 이동 navigation - 1
angelpsyche
2023. 4. 14. 18:24
안녕하세요 프시케입니다.
이번 포스팅은 앱에서 화면 간 이동을 시켜주는 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",
}
})
해당 소스로 만들어진 앱의 화면들입니다.
이번 포스팅은 여기서 마치겠습니다.