TIL_211217

nevermind·2021년 12월 22일

TIL 개발일지 리액트 스파르타코딩클럽 앱개발

TIL

목록 보기

7/27

리액트 네이티브앱

1. 네비게이터

앱에서 컴포넌트들을 페이지화 시켜주고, 해당 페이지끼리 이동하게 해주는 라이브러리

👇네비게이션 설치 코드

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

2. 스택네비게이션

컴포넌트에 페이지 기능을 부여해주고
컴포넌트에서 컴포넌트로 이동, 즉 페이지 이동을 가능하게 해준다.

페이지는 Stack.Screen,
책갈피는 Stack.Navigator라 지칭

👇createStackNavigator 사용 전 설치

yarn add @react-navigation/stack

👇App.js에 네비게이션 기능을 달기

페이지 이동을 위한 엘리먼트 in StackNavigator.js

{/* 컴포넌트를 페이지로 만들어주는 엘리먼트에 끼워 넣습니다. 이 자체로 이제 페이지 기능을 합니다*/}
            <Stack.Navigator
            screenOptions={{
                headerStyle: {
                    backgroundColor: "black",
                    borderBottomColor: "black",
                    shadowColor: "black",
                    height:100
                },
                //헤더의 텍스트를 왼쪽에 둘지 가운데에 둘지를 결정
                headerTintColor: "#fff",
                headerBackTitleVisible: false
            }}
        >

            {/* name에 해당 하는 부분이 페이지의 타이틀이 됩니다.*/}
            <Stack.Screen name="MainPage" component={MainPage}/>
            <Stack.Screen name="DetailPage" component={DetailPage}/>
        </Stack.Navigator>

Main 페이지(MainPage.js)에서 카드 버튼을 누르면(Card.js) 꿀팁 상세 페이지(DetailPage.js)로 이동한다면?!
- Card 버튼 부분에

onPress={()=>{navigation.navigate('DetailPage',content)

Stack.screen에 등록된 모든 페이지 컴포넌트들은 navigation 와 route 라는 딕셔너리(객체)를 속성으로 넘겨받아 사용가능, 다음과 같은 기능을 가짐

//해당 페이지의 제목을 설정할 수 있음
navigation.setOptions({
   title:'나만의 꿀팁'
})


//Stack.screen에서 name 속성으로 정해준 이름을 지정해주면 해당 페이지로 이동하는 함수
navigation.navigate("DetailPage")


//name 속성을 전달해주고, 두 번째 인자로 딕셔너리 데이터를 전달해주면, Detail 페이지에서 
//두번째 인자로 전달된 딕셔너리 데이터를 route 딕셔너리로 로 받을 수 있음
navigation.navigate("DetailPage",{
  title: title
})


//전달받은 데이터를 받는 route 딕셔너리
//비구조 할당 방식으로 route에 params 객체 키로 연결되어 전달되는 데이터를 꺼내 사용
//navigate 함수로 전달되는 딕셔너리 데이터는 다음과 같은 모습이기 때문입니다.
/*
  {
		route : {
			params :{
				title:title
			}
		}
	}

*/
const { title} = route.params;

예를 들면