준비물 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;