어플을 사용하다보면 터치시 다른화면으로 이동하는걸 많이 봤을텐데 , react native에서는
'navigation' 이라는 라이브러리 를 이용해서 구현한다.

(아쉽게도 react native (현재버전 0.63ver 2020.08.30 기준)는 아직 정식버전이 아니다. 구현되지 않은것이 아직 몇개 있어서 그로인해 라이브러리가 굉장히 많다.)

Navigation install

터미널

npm을 사용하고 있다면

- npm
npm install @react-navigation/native

yarn을 사용하고 있다면

- yarn
yarn add @react-navigation/native

expo를 사용한다면 '이것도' 설치!

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

터미널에 설치를 해주자 . (화면은 yarn , expo 기준)

Code

작업하는파일.js 파일내 최상단에 아래와 같이 import를 해주자.

import "react-native-gesture-handler";
import { NavigationContainer } from "@react-navigation/native";

JSX란에는 아래와 같이

<NavigationContainer> 로 전체를 감싸준다.

Stack install

Stack 이란 ?
웹에서 뒤로가기가 생기는것처럼 앱 (화면 1) 에서 (화면 2)로 넘어갈때 (화면 2) 뒤에 (화면 1)이 차곡차곡 쌓이는것을 말한다.

터미널

이것도 아래와 같이 install 해주자

- npm 
  npm install @react-navigation/stack

- yarn 
  yarn add @react-navigation/stack

Code

아래와 같이 복사 붙여넣기 해주자.

import { StatusBar } from "expo-status-bar";
import React from "react";
import { StyleSheet, Text, View } from "react-native";
import "react-native-gesture-handler";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import { TouchableOpacity } from "react-native-gesture-handler";  //onClick 과 비슷한 기능 RN(react native에선 onPress로 통일된다.)

function HomeScreen({ navigation }) {  {/* 추가 */}
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text>Home</Text>
       <TouchableOpacity onPress={() => navigation.navigate("Screen1")}>
        <Text>Screen1</Text>
      </TouchableOpacity>
      {/* 터치시 Screen1 컴포넌트로 이동 */}
    </View>
  );
}

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

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home"> {/* initialRouteName = 초기 보여지는 화면 */}
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Screen1" component={Screen1} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

위와 같이 적어주면 Screen간 이동 (Navigation) 및 뒤로가기 (Stack) 기능까지 구현 할수 있다.

위 코드를 Custom해보면서 Navigation을 익혀보자 .

결과