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

5. [Stack] Header Bar 설정 헤더바의 이름이나 색상 등을 바꿀 수 있는 방법에 대해 알아보자. App.js에서 정의된 스크린에 options라는 프로퍼티를 주고 title이라는 값을 주면 헤더바의 글자를 바꿀 수 있다. 이렇게 하면 초기값으로 헤더 타이틀을 지정할 수 있지만, 그 후에도 임의로 조정 가능하다. 아래 코드처럼 this.props.navigation.setOptions를 통해 헤더바의 설정을 바꿀 수 있다. 글자 뿐 아니라 글자색과 배경색을 바꿀 수도 있다. { this.props.navigation.setOptions({ title: 'Changed!!!', headerStyle: { backgroundColor: 'pink', }, headerTintColor: 'red'..