개요

현재 프로젝트의 구조 상

하단 탭 네비게이터 → 스택 네비게이터 로 중첩되어 있는 상황이다.

그로 인해, 하단 탭의 tab press를 스택 네비게이터 상의 Screen에서 인식하지 못한다.

내가 원하는 기능은 탭 바를 눌렀을 때 특정 로직을 실행시키는 것이다.

listeners?

Tab.Screen에서 사용 가능한 Option 중 하나.

React Navigation에서 화면(스텝)에서 발생하는 특정 이벤트를 듣고, 그 이벤트에 대해 반응할 수 있는 기능을 수행한다.

따라서, Tab.Screen의 listeners을 통해

1) Tab을 눌렀을 때

2) Stack에 존재하는 특정 Screen에 Tab의 클릭 여부 값을 전달하고,

3) Screen이 그 값을 전달 받은 순간 로직을 실행시키면 된다.

그렇게 되면 Tab을 누를 때마다 특정한 로직을 실행시킬 수 있다.

구현 과정

1. Tab.Screen에 listeners로 특정 Screen에 Params 값을 전달한다.

• 이때 Params 값은 탭의 클릭 여부가 된다

<Tab.Screen
	name="Dictionary"
	component={DictionaryStack}
	listeners={{
		tabPress: (e) => {
		// 탭이 클릭되었을 때 실행할 코드
		e.preventDefault(); // 기본 동작 방지
		navigation.navigate("Dictionary", {
                    screen: "DictionatyList",
                    params: { tabClicked: true },
                  });
		},
	}}
/>

작성한 내용은 다음과 같다.

하단 탭의 Dictionary를 눌렀을 때

Dictionary Stack에 존재하는 DictionatyList Screen으로 이동한다.

이때, DictionatyList에 params로 { tabClicked: true } 값을 전달한다.

2. 해당하는 Screen에서 값을 받아 useEffect로 실행한다.

const { tabClicked } = route.params || {};

• 먼저 route로 넘어온 params 값을 받아온다.
• 그 다음, useEffect를 통해 params 값의 여부에 따라 실행되는 로직을 작성한다

useEffect(() => {
    if (tabClicked) {
      // 탭이 클릭되었을 때 실행할 로직
      ...

      navigation.setParams({ tabClicked: false });
    }
  }, [tabClicked]);

• 마지막으로 navigation.setParams({ tabClicked: false }); 을 통해 params 값을 초기화한다.

이 과정을 통해 탭을 눌렀을 때 실행되는 로직을 작성할 수 있다.

useFocusEffect와는 사뭇 다른 기능이라 필요할 것 같아서 정리해둔다…