[리액트네이티브] react-navigation

 

리액트에선 리액트-라우터-돔을 사용했었는데, 리엑트 네이티브에선 리액트-네비게이션을 쓴다고 한당

(아래는 리액트 네이티브 공식문서)

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

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

 

 

네비게이션을 그냥 쓸 순 없고, 네비게이션을 감싸주는 네비게이션 컨테이너가 있는데, 요 컨테이너로 감싸주기

https://reactnavigation.org/docs/navigation-container/

https://reactnavigation.org/docs/navigation-container/

 

 

 

네비게이션 프롭들

Each screen component in your app is provided with the navigation prop automatically. The prop contains various convenience functions that dispatch navigation actions.

 

각각의 screen컴포넌트는 navigation prop가 자동으로 제공이 되는데, 이 prop들은 다양한 편리한 기능들을 제공한다고 한당

 

https://reactnavigation.org/docs/navigation-prop/

https://reactnavigation.org/docs/navigation-prop/

 

 

>> 공식문서 읽던 중 나중에 쓸것같은 넘들

• setParams - make changes to route's params
• dispatch - send an action object to update the navigation state

• setOptions - update the screen's optionssetOptions - update the screen's options

 

 

---

요기부턴 수업시간에 쌤이 추가로 자세히 알려주시 부분들

>> 네비게이션의 reset 메소드

const Three = ({ navigation: { goBack ,reset } }) => {
  return (
    <>
    <TouchableOpacity onPress={() => goBack()}>
      <View>
        <Text>Three</Text>
      </View>
    </TouchableOpacity>
    <TouchableOpacity onPress={() => reset({
      index: 1 , routes : [
				{name : "three"},
        {name : "two"}
      ],
       
    })}>
        <Text>Reset Navigation</Text>
      </TouchableOpacity>
    </>
  );
};

Reset Navigation부분을 터치하면 “two” 화면으로 갈거고

뒤로가기를 누르면 three가 기다리고 있을 것

→routes 배열에 지정된 대로 히스토리를 정해줄 수 있음

⇒ 리셋이 실행됐을때, 첫번째 나올 화면이 무엇인지를 가리키는게 인덱스임

 

>> setOptions

const Two = ({ navigation: { navigate , setOptions} }) => {
  return (
    <>
    <TouchableOpacity onPress={() => navigate("three")}>
      <View>
        <Text>Two</Text>
      </View>
    </TouchableOpacity>
    <TouchableOpacity onPress={()=>setOptions({title:"변경된 제목!"})}>
      <Text>set options</Text>
    </TouchableOpacity>
    </>
  );
};

→ 클릭하면 title이 바뀜

 

>> 네비게이터의 다양한 옵션들

import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { NavigationContainer } from "@react-navigation/native";

const Stack = createNativeStackNavigator();

// 이 스크린컴포넌트는 기본적으로 네비게이션이라는 prop을 가지고 있는데
// 이 네비게이션 prop에는 여러 메소드가 있고,
// 페이지이동을 위해 navigate라는 메소드를 사용한다.
const One = ({ navigation: { navigate } }) => {
  return (
    <TouchableOpacity onPress={() => navigate("two")}>
      <View>
        <Text>One</Text>
      </View>
    </TouchableOpacity>
  );
};

const Two = ({ navigation: { navigate, setOptions } }) => {
  return (
    <>
      <TouchableOpacity onPress={() => navigate("three")}>
        <View>
          <Text>Two</Text>
        </View>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => setOptions({ title: "변경된 제목!" })}>
        <Text>set options</Text>
      </TouchableOpacity>
    </>
  );
};

const Three = ({ navigation: { goBack, reset } }) => {
  return (
    <>
      <TouchableOpacity onPress={() => goBack()}>
        <View>
          <Text>Three</Text>
        </View>
      </TouchableOpacity>
      <TouchableOpacity
        onPress={() =>
          reset({
            index: 1,
            routes: [{ name: "three" }, { name: "two" }],
          })
        }
      >
        <Text>Reset Navigation</Text>
      </TouchableOpacity>
    </>
  );
};

export default function App() {
  return (
    <NavigationContainer>
      {/*initialRouteName 처음 만날 페이지  */}
      {/* <Stack.Navigator initialRouteName="three"> */}
      {/* headerShown : 헤더 감추는 부분 */}
      {/* headerBackTitle : "뒤로" */}
      <Stack.Navigator
        screenOptions={{
          headerTintColor: "red",
          headerBackTitle: "뒤로~",
          // presentation: "modal", 모달처럼 나옴
          presentation: "modal",
          // animation: "flip" 카드 뒤집기
          animation: "flip",
        }}
      >
        <Stack.Screen name="one" component={One} />
        <Stack.Screen name="two" component={Two} />
        {/* 페이지 개별적으로 주고싶을땐, 스크린에 options를 주면 된다.  */}
        <Stack.Screen options={{
          presentation : "modal"
        }}name="three" component={Three} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

// import { NavigationContainer } from '@react-navigation/native';
// import { createNativeStackNavigator } from '@react-navigation/native-stack';

// const Stack = createNativeStackNavigator();

// export default function App() {
//   return (
//     <NavigationContainer>
//       <Stack.Navigator>{/* ... */}</Stack.Navigator>
//     </NavigationContainer>
//   );
// }