[React Native] React navigation

1. 네비게이션 설치

npm install @react-navigation/native @react-navigation/native-stack

2. exop가 아니라면

npm install react-native-screens react-native-safe-area-context

3. App.js 상단에 import, stack 설정해주기

4. 태그 감싸기

• <Stack.Navigator>
• <Stack.Screen>

전체 코드

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React, { Component } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
const Stack = createNativeStackNavigator();

import {
  Button,
  SafeAreaView,
  StyleSheet,
  Text,
  View,
} from 'react-native';

function HomeScreen({navigation}){
  return (
    <View style = {{ flex : 1, alignItems:'center', justifyContent:'center'}}>
      <Text>Home Screen</Text>
      <Button title = "프로필 페이지로 이동" onPress={() => navigation.navigate('Profile', {name:'Jane'})} />
    </View>
  )
}

function ProfileScreen({navigation, route}) {
  return (
    <View style = {{ flex : 1, alignItems:'center', justifyContent:'center'}}>
      <Text> {route.params.name}`s Profile Screen</Text>
      <Button title = "홈 페이지로 이동(navigate)" onPress={() => navigation.navigate('Home')} />
      <Button title = "홈 페이지로 이동(push)" onPress={() => navigation.push('Home')} />
      <Button title = "홈 페이지로 이동(goback)" onPress={() => navigation.goBack()} />
      <Button title = "홈 페이지로 이동(popToTop)" onPress={() => navigation.popToTop()} />
    </View>
  )
}

class App extends Component {
  render() {
    return (
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="Home" component={HomeScreen} options={{title: 'Welcom'}} />
          <Stack.Screen name="Profile" component={ProfileScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }
};

const styles = StyleSheet.create({
});

export default App;

참고 : https://reactnavigation.org/docs/navigating