[React Native] React Navigation - 8. [Stack] Header Bar에 버튼 추가

 

 

---

 

---

 

---

8. [Stack] Header Bar에 버튼 추가

헤더바에 버튼을 추가하는 방법을 알아보자. 기존의 App.js 에서 Button을 import 한 뒤에 Home Screen의 options에서 headerRight 프로퍼티를 추가한다. jsx을 추가할 거라서 () => 를 사용한다. 새로운 버튼을 추가해 준다.

+) 이전의 headerTitle도 같은 원리로 jsx라서 ()=> 를 사용해야만 동작한 것으로 보인다.

  <Stack.Screen
    name="Home"
    component={HomeScreen}
    options={{
      title: 'Home Screen',
      headerTitle: () => <this.logoTitle />,
      headerRight: () => (
        <Button
          title="info"
          onPress={() => alert('I am a button!!')}
          color="orange"
        />
      ),
    }}
  />

위에는 Home 스크린에서 버튼을 추가한 것이고, User 스크린에도 버튼을 추가해보자. 이번에는 Home 스크린으로 이동하는 버튼을 추가한다. 여기도 setOptions에서 headerRight 프로퍼티를 추가해주고 onPress에서는 this.props.navigation.navigate('Home') 함수를 넣어준다. 

class UserScreen extends Component {
  headerStyle = () => {
    this.props.navigation.setOptions({
      title: 'Customizing',
      headerStyle: {
        backgroundColor: 'blue',
      },
      headerTintColor: 'yellow',
      headerTitleStyle: {
        fontWeight: 'bold',
        color: 'green',
      },
      headerBackTitle: 'BACK',
      headerRight: () => (
        <Button
          title="Go Back"
          onPress={() => {
            this.props.navigation.navigate('Home');
          }}
          color="orange"
        />
      ),
    });
  };
  /*
  ... 코드 생략 ...
  */

코드를 실행하면 User 스크린에서 왼쪽의 Back 버튼이나 오른쪽의 Go Back 버튼이나 둘 다 똑같이 동작하는 것처럼 보이지만 기존 버튼인 왼쪽의 Back은 정말 이전 화면의 의미인 Back 이고 새로 만든 오른쪽의 Go Back 버튼은 navigate를 통해 화면을 이동하는 코드이기 때문에 실제로 용도에 따라 다르게 사용할 수 있다.

 

실제로 공식 문서를 들어가면 여기서 다룬 것보다 더 많은 옵션들을 확인할 수 있으니 공식문서를 보고 상황에 따라 필요한 것들을 추가로 더 익히는 것을 추천한다.

https://reactnavigation.org/docs/headers

https://reactnavigation.org/docs/headers/

https://reactnavigation.org/docs/native-stack-navigator/#options

https://reactnavigation.org/docs/native-stack-navigator/#options

---

참고 자료

https://www.inflearn.com/course/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%84%A4%EC%9D%B4%ED%8B%B0%EB%B8%8C-%EA%B8%B0%EC%B4%88/dashboard

iOS/Android 앱 개발을 위한 실전 React Native - Basic - 인프런 | 강의