리액트 네이티브 튜토리얼 기능 구현3 - Example

1편과 2편에서 만든 Context와 Component를 사용해서 튜토리얼을 표시해 보겠습니다.

 

실제 동작은 1등 오답노트 앱에서 더 자세히 확인하실 수 있습니다.

 

먼저 1편에서 만든 TutorialProvider로 앱의 최상단을 감싸줍니다. 

 

그리고 다음과 같이 구멍과 텍스트 정보를 만들어 줍니다. 터치할 때마다 hole_1 ▷ hole_2 ▷ hole_3로 이동하기 위한 정보들입니다.

 

마지막으로 Settings 스크린에 다음 코드만 추가해 주면 됩니다.

 

하지만 저는 Settings 스크린에서 튜토리얼이 끝난 후 이용약관 스크린으로 이동시키기 때문에 아래와 같이 구현했습니다.

• 처음에 firstLaunch에 의해 useEffect가 트리거되지만, Settings 컴포넌트가 실행되기 전에는 firstLaunch에 의한 분기가 실행되지 않습니다.
• tutorialList.settings: true가 되면 다시 useEffect가 트리거 되는데 이때 firstLaunch에 의한 분기가 실행됩니다.
• firstLaunch: false가 되면 또 다시 useEffect가 트리거되지만 더 이상 아무런 작업도 실행되지 않습니다.