[React Native] 동적으로 header title 설정하기

일반적으로 StackNavigator에서 header title을 설정하여 사용했는데, 채팅방에 들어가면 header title을 상대방 이름으로 설정하고 싶었다.

 

먼저 이전 화면에서 클릭 이벤트 발생 시 채팅방 화면으로 사용자 이름을 넘겨준다.

this.props.navigation.navigate('Chat', {
  headerTitle: li.nickname,
});

 

그 후 header title을 바꾸고자 하는 화면(채팅방 화면)에 다음 코드를 추가하면 된다.

// 사용자 이름 전달받기
this.state = {
  headerTitle: props.route.params.headerTitle,
};

// 헤더에 사용자 이름 적용
this.props.navigation.setOptions({headerTitle: this.state.headerTitle});