12. [Tab] 설치 및 화면 Linking tab navigator는 화면 상단이나 하단에 탭을 생성해서 터치 시에 해당 스크린으로 이동하게 도와주는 navigator이다. https://reactnavigation.org/docs/tab-based-navigation https://reactnavigation.org/docs/tab-based-navigation/ reactnavigation.org 공식문서 보고 설치 따라서 하고 또다시 import 와 객체를 만들어 준 뒤에 사용! home_tab.js /** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow strict-local */ i..

11. [Drawer] Custom Component side drawer를 customize 하는 방법에 대해서 알아보자! CustomDrawerContent를 대체하는 SideDrawer를 만들어보자 sideDrawer를 만든 뒤에 스타일까지 지정하면 스크린 간 이동을 하도록 설정을 추가로 해줘야 한다. 이건 onPress를 해서 이동하는 함수를 사용해주면 된다. 이동하는 함수는 새로 만들어 준다. navigateToScreen = (route) => () => { this.props.navigation.dispatch( CommonActions.navigate({ name: route, params: {}, }), ); }; route 는 화면 이동을 위해서 파라미터로 받아온 것인데 여기서 arro..

10. [Drawer] Style 설정 side drawer의 스타일을 설정하는 방법에 대해 알아보자! Stack Screen을 다룰 때는 각 스크린별로 스타일을 주기 위해서 Stack.Screen 태그 안에 options라는 프로퍼티를 사용했었고 여러 스크린에 공통으로 적용되는 스타일의 경우 Stack.Navigator 태그 안에 ScreenOptions라는 프로퍼티를 사용했다. Drawer Navigator의 경우는 side drawer를 정의된 모든 스크린에서 열 수 있다. 즉, 공통으로 사용되는 부분이기 때문에 스타일도 공통으로 적용될 거고 Drawer.Navigator 태그 안에 스타일을 설정한다. drawerType: 'front' - 뒤에 있는 화면은 고정된 채 side drawer가 화면을..

9. [Drawer] 설치 및 화면 Linking 수많은 에러를 맞이했지만 이를 해결한 과정은 이전의 error/solution 4번에 정리해뒀다. 2022.01.05 - [React Native/Basic] - [React Native] error/solution home_drawer.js /** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow strict-local */ import React, {Component} from 'react'; import {StyleSheet, Text, View, Button} from 'react-native'; class DrawerHomeScreen e..

8. [Stack] Header Bar에 버튼 추가 헤더바에 버튼을 추가하는 방법을 알아보자. 기존의 App.js 에서 Button을 import 한 뒤에 Home Screen의 options에서 headerRight 프로퍼티를 추가한다. jsx을 추가할 거라서 () => 를 사용한다. 새로운 버튼을 추가해 준다. +) 이전의 headerTitle도 같은 원리로 jsx라서 ()=> 를 사용해야만 동작한 것으로 보인다. , headerRight: () => ( alert('I am a button!!')} color="orange" /> ), }} /> 위에는 Home 스크린에서 버튼을 추가한 것이고, User 스크린에도 버튼을 추가해보자. 이번에는 Home 스크린으로 이동하는 버튼을 추가한다. 여기도 s..

7. [Stack] Header Bar 커스터마이징 헤더바에 로고를 넣는 방법을 알아보자. src 폴더 내에 assets/pics 라는 이름으로 로고 아이콘을 저장할 폴더를 만든다. 그리고 로고 아이콘 이미지 파일을 해당 폴더 내에 저장한다. 그럼 준비는 끝난다. 이미지를 가져오는 것이기 때문에 App.js 에 Image를 추가로 import 해준다. import {StyleSheet, Text, View, Image} from 'react-native'; logoTitle = () => { return ( ); }; logoTitle 이라는 이름의 함수를 만들었다. 여기서는 Image 태그를 사용하여 아이콘 이미지를 가져온다. style 로 크기를 지정해 준 뒤, source 에 파일 경로를 작성한다...