내마음대로만들어보자/Expo22 페이지 내용 공유하기 - Share 페이지 내용을 간단하게 문자, 이메일, 카카오톡 등으로 공유하는 기능을 사용해보자. 1. Share 별도 설치할 라이브러리 없이 react-native에서 기본적으로 제공을 해준다. (임포트만 해주면 끝) import { share } from 'react-native'; Share함수를 만들고 거기에 react-native에서 제공해주는 사용법대로 작성해보자. const share = () => { Share.share({ message:`${tip.title} ${tip.desc} ${tip.image}`, }); } 위와같이 메세지로 보내고싶은 내용들을 담으면 되고! 마지막으로 버튼에 onPress로 연결해주면된다. onPress={()=>share()} 이미지가 실제 이미지형태로 공유가되면 좋겠지.. 2021. 9. 13. 스택네비게이션 - 페이지 이동하기 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. 이전 1 2 3 4 5 6 다음
