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 에 파일 경로를 작성한다...

6. [Stack] 여러 화면에 공통 Style 적용 여러 화면에 공통으로 Style을 적용하기 위해서는 Stack Navigator에 스타일을 지정해주면 된다. 여기서 프로퍼티 이름이 달라지는데 options가 아니라 screenOptions라는 이름으로 프로퍼티를 주면 된다. 그리고 모든 화면에 공통으로 스타일을 적용하고 단 하나의 화면만 스타일을 다르게 주고 싶으면 기존의 해당 화면의 Stack Screen에서 options 프로퍼티를 주면 된다. App.js /** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow strict-local */ import React, {Component} ..