화면이동을 어떻게 할까?

지금까지 저는 웹사이트에서 routes를 통해 컴포넌트들을 스위치 시키며 화면이 이동되는 것처럼 보이게 했습니다.
그렇다면 앱에서는 어떻게 이런 기능을 만들 수 있을 까요?

바로 navigation을 통해서 가능합니다.

* react-navigation, stack

1. install

먼저 navigation/native를 install 해봅시다.

• npm install @react-navigation/native
  또는 yarn add @react-navigation/native

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

이제 stack을 install 해줍니다.

• npm install @react-navigation/stack
  또는 yarn add @react-navigation/stack

2. import, 코드 작성

// 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 { createStackNavigator } from '@react-navigation/stack';

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

const Stack = createStackNavigator();

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

export default App;

이렇게 import를 시켜주고 태그로 전체를 감싸줍니다.
import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'

그러면

이렇게 상단에 bar가 생기고 title이 나오게 됩니다.

<Stack.Screen
  name="Home"
  component={HomeScreen}
  options={{ title: 'Overview' }}
/>

이런식으로 옵션에 title에 원하는 string을 적으면 상단 바의 title이 바뀝니다.

3. button을 만들어 이동해보자

<Button
  title="Go to Details"
  onPress={() => navigation.navigate('Details')}
/>

이렇게 디테일 컴포넌트를 만들고 버튼에 navigate()를 사용해 가고자 하는 name을 주면 이동이 가능해 집니다!

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

가고자 하는 곳이 현재라면 버튼을 눌러도 스택이 쌓이지 않습니다.
그러나 쌓이게 할 수도 있습니다.

<Button
  title="Go to Details... again"
  onPress={() => navigation.push('Details')}
/>

이런식으로 navigate대신 push를 넣어줍니다.

그밖에도

• goback()
  = 바로 전으로 돌아간다.
• popToTop()
  = 쌓여있는 스택을 전부 없애고 가장 위로 올라간다.

이런 것들이 있습니다.

React-native 정복해 봅시다.