React-navigation 에서 Stack의 Header 내용 setOptions()로 변경하기

처음엔 headerRight() 를 변경할 수 있다는 사실을 몰라서, stack을 정의하고 사용하는 부분에서 참 고생을 많이했다.
알고보니 setOptions() 를 이용해 해더내용을 모두 변경하고 컨트롤 할 수 있었다. 진작 알았다면 하는 아쉬움이 크다.

Header를 사용하는 컴포넌트 내에서 route로 받은 param를 사용하려면 다음과 같이 설정하면 된다.

const MyStack1 = ({ navigation, route }: Props) => {
  const { title } = route.params;

  useEffect(() => {
    navigation.setOptions({
      title: title,
    });
  }, []);
  ...

만일 headerRight 를 변경하고 싶은 경우에는, 아래와 같이 사용할 수 있다.

  useLayoutEffect(() => {
    navigation.setOptions({
      headerRight: () => (<Component></Component>)
    })
  }

이후 다른 View에서 MyStack1 로 이동하고 싶다면, 다음과 같이 호출한다.

onPress={() =>
  navigation.navigate("MyStack1", {
    title: "New Title Name",
  })
}