[React Native] 4장 네비게이션 구현

1. React Native Navigation 

React Native에서 React Navigation을 사용하여 네비게이션을 구현하는 방법은 React Navigation 라이브러리를 설치해 사용할 수 있습니다. 아래 명령어로 라이브러리를 설치합니다.

npm install @react-navigation/native
npm install @react-navigation/native-stack
npm install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
npm install --save-dev typescript @types/react @types/react-native

 

tsconfig.json 파일을 프로젝트 루트에 추가하여 TypeScript 설정을 해줍니다.

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "target": "esnext",
    "module": "CommonJS",
    "jsx": "react-native",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["**/*.ts", "**/*.tsx", ".expo/types/**/*.ts", "expo-env.d.ts"]
}

---

2. 화면 컴포넌트 생성

먼저 각 화면을 나타내는 컴포넌트를 생성해줍니다.

// screens/HomeScreen.tsx
import React from "react";
import { View, Text, Button } from "react-native";
import { StackNavigationProp } from "@react-navigation/stack";
import { RootStackParamList } from "@/app/(tabs)/App";

type HomeScreenNavigationProp = StackNavigationProp<RootStackParamList, "Home">;

interface Props {
  navigation: HomeScreenNavigationProp;
}

const HomeScreen: React.FC<Props> = ({ navigation }) => {
  return (
    <View>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate("Details")}
      ></Button>
    </View>
  );
};

export default HomeScreen;

// screens/DetailsScreen.tsx
import React from "react";
import { View, Text, Button } from "react-native";
import { NativeStackNavigationProp } from "@react-navigation/native-stack";
import { RootStackParamList } from "../app/(tabs)/App";

type DetailsScreenNavigationProp = NativeStackNavigationProp<
  RootStackParamList,
  "Details"
>;

interface Props {
  navigation: DetailsScreenNavigationProp;
}

const DetailsScreen: React.FC<Props> = ({ navigation }) => {
  return (
    <View>
      <Text>Details Screen</Text>
      <Button title="Go Back" onPress={() => navigation.goBack()} />
    </View>
  );
};

export default DetailsScreen;

// app/(tabs)/App.tsx
import React from "react";
import MainApp from "../MainApp";

const App: React.FC = () => {
  return <MainApp />;
};

export default App;

// app/MainApp.tsx
import "react-native-reanimated";
import React from "react";
import {
  NavigationContainer,
  NavigationIndependentTree,
} from "@react-navigation/native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import HomeScreen from "../screens/HomeScreen";
import DetailsScreen from "../screens/DetailsScreen";

const Tab = createBottomTabNavigator();

const MainApp: React.FC = () => {
  return (
    <NavigationIndependentTree>
      <NavigationContainer>
        <Tab.Navigator initialRouteName="Home">
          <Tab.Screen name="Home" component={HomeScreen} />
          <Tab.Screen name="Details" component={DetailsScreen} />
        </Tab.Navigator>
      </NavigationContainer>
    </NavigationIndependentTree>
  );
};

export default MainApp;

---

 

GitHub - Koras02/react-native-bloging: https://thinky.tistory.com/category/Mobile/React%20Native