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
'Computer Programming > React-Native' 카테고리의 다른 글
(React-Native) Project: TabNavigator 기능 넣기 (0) | 2022.08.15 |
---|---|
(React-Native) Project: Create Project & StackNavigator 기능 넣기 (0) | 2022.08.15 |
React-Native App 개발(component 이용한 counter 만들기) (0) | 2022.07.05 |
앱개발 종합반_filter (0) | 2022.06.27 |
앱개발 종합반_map (0) | 2022.06.27 |