준비물
App.js,
Navigation.js(create),
APP_Main.js(create),
Home.js(create),
@react-navigation/native(install),
@react-navigation/stack(install)
App.js
NavigationContainer 를 생성해주고 Navigation.js 를 불러와서 시작화면으로
나올 수 있게 작성해 줍니다.import React, {useState, useEffect} from 'react'; import Navigation from './src/JS_lib/Navigation/Navigation'; import { NavigationContainer } from '@react-navigation/native'; const App = () => { return ( <NavigationContainer> <Navigation/> </NavigationContainer> ); }; const styles = StyleSheet.create({ }); export default App;
Navigation.js
App.js 에서 화면을 import 해주고 Stack에 추가해 줍니다.
Stack은 Stack.Screen 을 추가해주는 순서대로 쌓여있어
맨 처음에 추가된 Stack.Screen 화면이 시작화면으로 됩니다.import Navigation from './src/JS_lib/Navigation/Navigation'; import { NavigationContainer } from '@react-navigation/native'; import APP_Main from '../../SCREEN/APP_Main'; //화면 import import Home from '../../SCREEN/Home'; //화면 import const Stack = createStackNavigator(); //Stack 선언 function Navigation() { return ( <Stack.Navigator> {/* Stack.Navigator 생성 (화면을 이동할 수 있게 해 줍니다.) */} <Stack.Screen name="APP_Main" component={APP_Main} /> <Stack.Screen name="Home" component={Home} /> {/* Stack.Screen 안에 이동할때 사용할 화면 이름(name)과 실제로 이동할 페이지 인 APP_Loading(component)를 넣어 추가해줍니다. */} </Stack.Navigator> ); } export default Navigation;
APP_Main.js
navigation.replace('Home') 을 통해 Home 화면으로 이동합니다.
import React, { useRef , useEffect } from 'react'; import { View, ustomButton } from 'react-native'; const APP_Main = ({navigation}) => { return ( <View> <CustomButton buttonColor={'#023e73'} title={'이동'} onPress={() => navigation.replace('Home')}/> </View> ) } const styles = StyleSheet.create({ // 스타일 지정 }) export default APP_Loading;
Home.js
import React, { useRef , useEffect } from 'react'; import { View, Text } from 'react-native'; const Home= ({navigation}) => { return ( <View> <Text> 이동완료 </Text> </View> ) } const styles = StyleSheet.create({ // 스타일 지정 }) export default Home;