React Native | Navigation Stack 화면 전환 구현

아래 React Native 개발 환경 구축을 바탕으로 작성되었습니다.
https://kitty-geno.tistory.com/47?category=956753

React Native | 맥(Mac) 개발 환경 구축

 

---

 

@react-navigation/native 설치

 

npm install @react-navigation/native

 

 

React Navigation 를 사용하기 위한 라이브러리 설치

 

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

#빌드시 react-native-reanimated-65-jsc.aar를 못찾을경우 아래로 설치
npm install react-native-reanimated@2.3.0-alpha.2 react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

 

 

Stack 사용을 위해 설치

 

npm install @react-navigation/stack

 

 

설치가 완료되면 iOS 폴더에 가서 아래에 명령어를 실행

IOS 프로젝트 경로에서
pod install 또는 npx pod-install ios

 

App.js

Event)
onPress - 일반 TouchEvent
onLongPress - 길게 누르고 있을때만 발생하는 TouchEvent 
onPressIntouch - 올려놓는 순간 발생하는 TouchEvent
onPressOuttouch - 떼는 순간 발생하는 TouchEvent

 

import React from 'react';
import type {Node} from 'react';

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

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function Home({navigation}) {
  return (
    <TouchableOpacity style={{ flex: 1 }} onPress={() => navigation.navigate('MyPage')}>
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center'}}>
        <Text>Go to the Screen Touch!</Text>
        <Button
          onPress={() => navigation.navigate('MyPage')}
          title="Go to the Button Press!">
        </Button>
      </View>
    </TouchableOpacity>
  );
}

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

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen 
          name="Home" 
          component={Home}
          options={{headerShown:false}} // show, hide header title
        />
        <Stack.Screen 
          name="MyPage" 
          component={MyPage} 
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

 

 

↓

 

 

 

---

 

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