RN1. Expo 설치 1. RN은? 2. RN이 작동 흐름? Native (iOS와 안드로이드)에서 이벤트를 듣고 이벤트에 대한 데이터를 모아서 JSON 타입으로 만든다. Native는 브릿지를 통해서 JSON 타입으로 만들어진 페이로드를 JS로 보낸다 JS는 브릿지로 부터 전달받은 이벤트에 관련된 메세지를 통해 코드를 실행시키고 다시 Native에 메세지를 보내준다. 2.Expo란? 폰 안에 있는 RN 코드를 실행시켜서 모바일에서 RN 코드를 바로 미리보기 할 수 있음 2. Expo 설치 2-1. 엑스포 설치 $ npm install --global expo-cli 2-2. 새로운 프로젝트 생성 $ expo init my-project 2-3. 맥 사용자라면 watchman 또한 설치해야 한다 $ brew update $ .. 2022. 5. 21. React Navigation5. 네비게이션 생명주기 1. addListenr() function Profile({ navigation }){ React.useEffect(() => { const unsubscribe = navigation.addListener('focus', () => { //스크린이 focus 되었을 때 실행될 코드 }); return unsubscribe; },[navigation]); return ; } 사이드 이펙를 수행하기 위한 방법으로는 이벤트를 수동으로 설정하는 대신 useFocusEffect 훅을 사용할 수 있다. useFocusEffect는 리액트의 useEffect 훅과 같지만 네비게이션 생명주기에 따라 실행된다. 2. useFocusEffect() 훅 import { useFocusEffect } from '@reac.. 2022. 5. 20. React Navigation4. header bar 설정 목차 헤더 타이틀 설정 타이틀에 params 사용 options 업데이트 헤더 스타일 적용 공통 options 공유 1. 헤더 타이틀 설정 스크린 컴포넌트에서는 객체 또는 객체를 반환하는 함수 인 options 프롭을 사용할 수 있다. 1-1. 객체 반환 시 1-2. 함수 반환 시 { title: route.params.name} } /> options가 함수일 경우, 전달된 인자는 다음의 두가지 속성을 가진 객체이다 navigation: 스크린에 대한 네비게이션 옵션 route: 스크린에 대한 라우터 옵션 2. 타이틀에 params 사용하기 타이틀에 파람스를 사용하기 위해서는 configuration 객체를 반환하는 함수 인 options 프롭을 만들어야 한다. 컴포넌트가 렌더되기 이전에 정의되기 때문.. 2022. 5. 20. 이전 1 다음