react native navigation

요구사항

• react-native>= 0.72.0
• expo>= 49(Expo를 사용하는 경우)
• typescript>= 5.0.0(TypeScript를 사용하는 경우)

필수 패키지

npm install @react-navigation/native@next

React Navigation은 몇 가지 핵심 유틸리티로 구성되며, 이러한 유틸리티는 네비게이터가 앱에서 탐색 구조를 만드는 데 사용된다.

설치 작업을 프런트로드하기 위해 대부분의 탐색기에서 사용하는 종속성을 설치하고 구성한 다음 일부 코드 작성을 시작할 수 있다. 

react-native-screens 와 react-native-safe-area-context 라이브러리가 이미 설치되어 있고 최신 버전인 경우 여기에서 완료된다. 아니라면 설치해야 한다.

Expo 관리

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

 expo를 사용하지 않는다면

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

React Native 0.60 이상에서는 연결이 자동으로 이루어진다 . 따라서 실행할 필요가 없다 react-native link .

Mac을 사용하고 iOS용으로 개발하는 경우 연결을 완료하려면 Cocoapods를 통해 Pod를 설치해야 한다.

CocoaPods.org

npx pod-install ios

react-native-screens패키지가 Android 장치에서 제대로 작동하려면 하나의 추가 구성 단계가 필요하다. 아래에 있는 편집 MainActivity.kt또는 파일이다 .MainActivity.javaandroid/app/src/main/java/<your package name>/

강조 표시된 코드를 클래스 본문에 추가한다 MainActivity.

코틀린:

class MainActivity: ReactActivity() {
  // ...
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(null)
  }
  // ...
}

자바:

public class MainActivity extends ReactActivity {
  // ...
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(null);
  }
  // ...
}

이 파일 상단의 패키지 설명 아래에 다음 import 문을 추가해야 한다.

import android.os.Bundle;

React Navigation

React Navigation을 사용할 때 앱에서 네비게이터를 구성한다. 네비게이터는 앱의 화면 간 전환을 처리하고 헤더, 탭 표시줄 등의 UI를 제공한다.

네비게이터를 구성하는 두 가지 기본 방법이 있다.

정적 구성

정적 구성 API는 상용구를 줄이고 TypeScript 유형 및 딥 링크와 같은 항목을 단순화한다. 새 프로젝트를 시작하거나 React Navigation을 처음 사용하는 경우 앱을 설정하는 데 권장되는 방법 이다. 나중에 더 많은 유연성이 필요할 경우 언제든지 동적 구성과 혼합하여 사용할 수 있다.

// In App.js in a new project

import * as React from 'react';
import { View, Text } from 'react-native';
import { createStaticNavigation } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

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

const RootStack = createNativeStackNavigator({
  screens: {
    Home: HomeScreen,
  },
});

const Navigation = createStaticNavigation(RootStack);

export default function App() {
  return <Navigation />;
}

동적 구성

동적 구성은 더 많은 유연성을 제공하지만 더 많은 상용구와 구성(예: 딥 링크, TypeScript 등)이 필요하다.

동적 구성을 시작하려면 먼저 앱을 NavigationContainer. 일반적으로 index.js다음 과 같은 항목 파일에서 이 작업을 수행한다 

App.js.

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

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

또는

// In App.js in a new project

import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

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

const Stack = createNativeStackNavigator();

function RootStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
    </Stack.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <RootStack />
    </NavigationContainer>
  );
}