RN Navigation

내가 까먹을까봐 적어 놓는 노트

Install

react-navigation 을 사용하려면 아래의 패키지들을 설치해야한다.
(이럴거면 왜 쪼개놓은거지 .. 😒)

$ npm i -S react-native-safe-area-context @react-navigation/stack @react-navigation/native react-native-gesture-handler react-native-reanimated @react-native-community/masked-view

App 또는 프로젝트의 root 격 파일에서react-native-gesture-handler 를 import 해야한다.

import 'react-native-gesture-handler';

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

Stack.Screen

CreateStackNavigator 를 이용하여 히스토리를 컨트롤 할 수 있다.
Stack.Screen 을 이용하여 path 에 맞는 컴포넌트를 노출 할 수 있다.

import 'react-native-gesture-handler';
import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {SafeAreaProvider} from 'react-native-safe-area-context';
import IntroduceScreen from './screens/introduce';
import SignupScreen from './screens/signup';
import RecordScreen from './screens/record';
import HomeScreen from './screens/home';
const Stack = createStackNavigator();
function App() {
  return (
    <SafeAreaProvider>
      <NavigationContainer>
        <Stack.Navigator initialRouteName="introduce" headerMode="none">
          <Stack.Screen name="introduce" component={IntroduceScreen} />
          <Stack.Screen
            name="signup"
            component={SignupScreen}
          />
          <Stack.Screen name="record" component={RecordScreen} />
          <Stack.Screen name="home" component={HomeScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    </SafeAreaProvider>
  );
}
export default App;

특정 스크린 제스처 설정

특정 스크린에 엣지 스와이프를 막으려면 gestureEnabled 옵션을 조절하면된다.

<Stack.Screen
  name="signup"
  component={SignupScreen}
  options={{
    gestureEnabled: false,
  }}
/>

페이지 이동

NavigationContainer 로 감싸져 있기 때문에 Props 로 Navigation 객체가 내려온다. 내려 받은 객체를 이용하여 Stack 조작이 가능하다.
hook 이 있는지는 찾아봐야겠다.

import React from 'react';
function IntroduceScreen({navigation}) {
  const moveToSignup = () => {
    navigation.push('signup');
  };
  return (
    <View></View>
  );
}
export default IntroduceScreen;

SafeAreaView

개발을 하다보면 상단과 하단의 영역을 침범하여 스타일이 적용되는 것들을 확인 할 수 있다. 이 때 사용하는 것이 SafeAreaView 이다.
RN 자체에 내장된 녀석을 사용하지않고, navigation 에서 지원해주는 컴포넌트를 이용한다.

import {SafeAreaView} from 'react-native-safe-area-context';
function App() {
  return <SafeAreaView>//...</SafeAreaView>
}