React Native Test2

Navigator 페이지 이동

Posted by ETHAN KIM on May 26, 2022 · 1 min read
React

주요 개념

  • 최상위 App.js 앱 내 페이지 이동 정의
  • NavitaionCongainer / stack 형식 테스트
  • page가 될 컴포넌트는 screens 폴더에 분리


실습 환경

  • nodejs react native 패키지
  • android studio 가상 디바이스 사용


구현 결과


./App.js

import { NavigationContainer, StackActions } from "@react-navigation/native"; 
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import React from 'react';
import Home from './screens/Home';
import Detail from './screens/Detail';
import Login from './screens/Login';

const Stack = createNativeStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName = "Home">
        <Stack.Screen name="Login" component={Login} />
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen name="Detail" component={Detail} />
      </Stack.Navigator>
    </NavigationContainer>    
  )
}

export default App;