React-Native App 개발(Page와 Component 만들기)

1. Paging을 쉽게 도와주는 외부 Library, React Navigator: https://reactnavigation.org/docs/getting-started/

 

Navigation basic library 설치

yarn add @react-navigation/native

Additional Library 설치

expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

 

 

 

2. 앱에서 Component들을 페이지화 하는 Navigator Library가 바로 Stack Navigator

 

Stack Navigator 설치

yarn add @react-navigation/stack

설치한 Stack Navigator 가져오기

import { createStackNavigator } from '@react-navigation/stack';

 

3. Header 숨기기

<Stack.Navigator screenOptions={{
        //헤더 숨기기
        headerShown: false,
      }}>

4. 페이지 이동시 데이터까지 넘기고 싶다면 Stack Navigator가 주는 route의 params 딕셔너리에서 값을 꺼내 사용하면 된다.

const { title} = route.params;

 

5. Tab Navigator도 하나의 페이지처럼 생각하면 된다.

 

Tool 설치 명령어

yarn add @react-navigation/bottom-tabs

6. 디자인 Tool, NativeBase

 

NativeBase 공식문서: https://docs.nativebase.io/

Reactive Native와 충돌 났을 시, 2.0 버전의 NativeBase 공식문서: https://docs-v2.nativebase.io/docs/GetStarted.html

 

NatvieBase Tool 설치 명령어

yarn add native-base@2 --save

Expo font Tool 설치

yarn add native-base@2 --save

 

7. 간단하게 NativeBase가 제공해주는 레이아웃 태그로 View 태그나 Flex 태그들을 대체할 수도 있다.

 

8. 움직이는 배너(애니메이션) 만들기

여러 도구들이 많지만, 대표적인 링크: https://github.com/oblador/react-native-animatable

 

react-native-animatable 설치 명령어

yarn add react-native-animatable