react-native 프로젝트 만들기

react-native 프로젝트 생성

1. 프로젝트 위치 설정

cd C:\

npx react-native@latest init 프로젝트명 --pm npm

다른 명령어로 프로젝트를 설치하면 아무것도 안만들어지고 아래와 같은 오류가 발생한다.

| Downloading templateerror Installing pods failed. This doesn't affect project initialization and you can safely proceed.
However, you will need to install pods manually when running iOS, follow additional steps in "Run instructions for iOS" section.

× Downloading template

참고 블로그

https://hit-sand.tistory.com/62
https://zibu-story.tistory.com/187

---

node 버전관리

windows에서는 nvm을 사용한다.

nvm version               // 버전 확인
nvm install latest        // 최신 버전 설치
nvm use latest            // 최신 버전 사용
node -v                   // 버전 확인

---

react-native-gesture-handler

import 'react-native-gesture-handler';

• 제스처 핸들링 기능을 활성화
• 다양한 제스처(예: 탭, 스와이프, 핀치 등)를 다루기 위해 필요
• 네비게이션 라이브러리(예: React Navigation)와 함께 사용될 때 필요
• 앱의 진입점 파일(예: index.js 또는 App.js)의 최상단에 이 코드를 추가

---

react-navigation

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

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

import { NavigationContainer } from '@react-navigation/native';
// 네비게이션 상태를 관리하고 네비게이션의 루트를 설정

import { createStackNavigator } from '@react-navigation/stack';
// 스택 네비게이터를 생성하기 위한 함수를 임포트
// 스택 네비게이터는 화면을 스택 구조로 쌓아 관리
// 화면 간의 전환을 관리

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}