React-native navigation 이용하여 개발하기

React-native navigation 사용법에 대한 정리 입니다.

기존에 사용하던 React 와는 아무래도 웹과 모바일의 환경의 차이 때문에 발생하는 다른점들이 있었습니다.

그중 중요한점은 웹에서 페이지를 router 이용해서 페이지를 이동하는 것과 달리 stack 형식으로 현재 view 에서 위로 쌓이는 형식이였습니다.

사용법

const stack = createNativeStackNavigator();
<stack.Navigator>
  <stack.Screen name="Ex" component={Ex}/>
</stack.Navigator>

createNativeStackNavigator 를 이용 하여 stack 를 만들어줌으로

내장 기능을 사용할수 있습니다.

Navigator 가 부모가 되고 Screen 가 자식으로 포함된 구조 입니다.

Screen 속 name 은 route 이름이 되고,
component 는 보여주고 싶은 component 를 뜻합니다.

자세한 props 들은

https://reactnavigation.org/docs/stack-navigator

에서 확인하실수 있습니다.

ex)

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

const Home = () => {
  return (
    <View>
      <Text>Home Screen</Text>
    </View>
  )
}

const Stack = createNativeStackNavigator();

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

  )
}

---

실제 사용해보기

이제 세팅은 끝났습니다.
실제로 사용해보겠습니다.

const Work = () => {
 // useNavigation navigation을 불러오는 내장 Hooks 입니다.
  const navigation = useNavigation();
  
  return (
    <View>
     <Pressable onPress={() => navigation.navigate('Home')}>
      <Text>집으로 가는 버튼</Text>
     </Pressable>
    </View>
  )
}

useNavigation hooks 로 선언한 navigation 을 이용해 내장 함수를 이용 하여 이동 할수 있습니다.

navigate or push 키워드를 이용하여 이동 가능

---

goBack

    <Pressable onPress={() => navigation.goBack('Home')}>
      <Text>뒤로 가기 버튼</Text>
     </Pressable>

goBack 키워드를 사용하면 이전 화면으로 되돌아갈 수 있습니다.

---

popToTop

react-native 는 웹과는 다르게 화면이 stack 형식으로 계속 하여 쌓이는 방식이라고 앞서 말했었습니다.

쌓이는 stack 의 depth 가 깊어지면 한번에 쌓이 stack 들을 치워줄 필요가 있습니다.

그럴때는 popToTop 키워드를 사용하여 정리 해줍니다.

     <Pressable onPress={() => navigation.popToTop('Home')}>
      <Text>뒤로 가기 버튼</Text>
     </Pressable>

---

params 전달

const AComponent = () => {
  return (
      <View>
        <Pressable o onPress={() => navigation.navigate("BScreen", {
          name: '고길동',
          content: 'B 로 달려간다.',
        })>
           <Text>b로 데이터 전달</Text>
        </Pressable>
    </View>
  )
}

const BSComponent = ({ route }) => {
  const { name, content } = route.params;
  // print BIBI, B 로 데이터 전달
  console.log(name, content);
  return null;
}

---

더 자세한 내용은
https://reactnavigation.org/docs/getting-started/