[react-native]navigation 설치

자세한 건 여기를 보고..

https://reactnavigation.org/docs/getting-started

1. 설치한다.

npm install @react-navigation/native

2. 또 설치한다.

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

3. 감싸준다.

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';

export default function App() {
  return (
    <NavigationContainer>{/* Rest of your app code */}</NavigationContainer>
  );
}

4. 또또 설치한다

npm install @react-navigation/native-stack

5. 기본포맷

// src/screens/Home.js
import * as React from 'react';
import { View, Text } from 'react-native';

export default function Home() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}


// (root)/App.js
import * as React from 'react';
import AppNavigation from './src/navigation/index'

function App() {
  return (
    <AppNavigation></AppNavigation>
  );
}

export default App;

// src/navigation/index.js

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import Home from './src/screens/Home';

const Stack = createNativeStackNavigator();

export default function AppNavigation() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName='Home' screenOptions={{headerShown:false}}>
        <Stack.Screen name="Home" component={Home} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

화면확인