본문 바로가기

내마음대로만들어보자326

스택네비게이션 - 페이지 이동하기 1. 페이지 이동 구현하기 Main페이지에서 카드를 클릭하는경우 상세 페이지로 이동하는! 일반적인 앱 에서 클릭함에 따라 화면전환이 되게 구현해보자. 페이지 이동을 위해서는 책갈피가 페이지들에게 부여된 페이지 기능을 사용해야한다. Stack.Screen에 등록된 모든 컴포넌트 페이지들은 navigation 과 route라는 딕셔너리(객체)를 속성으로 넘겨 받아 사용 한다. * navigation 객체는 setOptions 와 navigate 함수를 가지고 있다. - setOptions : 해당페이지의 제목&디자인 등을 수정할 수 있다. - navigate : Stack.Screen에서 name속성으로 정해준 이름으로 지정하면 해당 페이지로 이동할수있게해주는 함수 위와같이 name 속성을 전달해주고, 두번.. 2021. 9. 13.
스택네비게이션 - 적용하기 네비게이션의 일부 기능에 대해 알아보고 사용해보자! 1. 스택네비게이션이란? 컴포넌트 페이지에 페이지 기능을 부여하고, 컴포넌트에서 컴포넌트로 이동할 수 있도록 해주는 기능이다. 강의에서 알려준 이 그림을 봐도 스택네비게이션이 어떤 역할을 하는지 한눈에 들어온다! 내가 만든 컴포넌트를 페이지처럼 사용할 수 있도록 페이지로 컴포넌트를 감싸는데 이때 감싸는 페이지를 Stack.Screen 이라고한다. 이렇게 만든 여러 페이지들은 책갈피 기능을 하는 스택 네비게이터에 모두 등록하여 언제든지 이동이 가능하도록 해주며, 이를 Stack.Navigator 라고 한다. 2. 사용방법 ① 패키지 설치 yarn add @react-navigation/stack ② 폴더생성 navigation 폴더를 만들어, StackN.. 2021. 9. 9.
네비게이터 1. 네비게이터란? navigate 앱에 페이지 개념을 입혀준다고 보면된다! 앱에서 만든 컴포넌트들을 페이지화 시켜주고, 해당 페이지끼리 이동을 가능하게 해주는 라이브러리다. https://reactnavigation.org/ React Navigation | React Navigation Routing and navigation for your React Native apps reactnavigation.org 네비게이션 사용을 위해 설치를 해주자. yarn add @react-navigation/native 참고로, 네비게이션에서는 여러가지 기능들이 존재하며, 이 기능들은 expo에서 제공을 하고있는데 기능을 사용하기 위해서는 공식문서를 참고해서 추가로 설치를 해줘야 한다는점도 잊지말자. 2021. 9. 8.
state를 이용한 카테고리 기능 사용하기 꿀팁 리스트에서 생활,재테크, 반려견 등 버튼에 따라 보여지는 리스트를 다르게 보여주기 위함! 1. const [cateState, setCateState] = useState([]) 카테고리에 따라 다른 꿀팁들을 보여주기위해 그떄그때 저장 관리할 상태 2. useEffect(()=>{ //뒤의 1000 숫자는 1초를 뜻함 //1초 뒤에 실행되는 코드들이 담겨 있는 함수 setTimeout(()=>{ //꿀팁 데이터로 모두 초기화 준비 let tip = data.tip; setState(tip) setCateState(tip) setReady(false) },1000) },[]) 3. const category = (cate) => { if(cate == "전체보기"){ //전체보기면 원래 꿀팁 데이터를.. 2021. 9. 8.

티스토리툴바