개요
Stack으로 페이지를 관리하다 보니 몇 가지 문제가 있었다.
다른 페이지에서 해당 탭을 클릭했을 때
메인 Screen이 아닌, 이전에 머물던 Screen으로 넘어가는 것
(Stack 구조 때문인 듯 하다.)
서브 Screen에서 하단바가 유지되는 것
이 포스트에선 …
- 다른 페이지에서 하단바를 숨기는 Component
를 작성해볼 예정이다.
특정 Component에서 하단바 숨기기
같은 기능으로 묶여있는 Screen은 보통 Stack으로 관리하기 때문에, 메인으로 작성된 하단바 옵션을 따라갈 수 밖에 없다.
- 나는 메인 페이지에서 하단바가 보이길 원하기 때문에, 기본적으로는 숨기지 않는 방향으로 진행했다.
따라서 하단바만 숨기는 로직을 작성하는 방향으로 하여, 하단바를 숨기고 싶은 Component가 존재한다면 해당 기능을 import 하여 사용하기로 하였다.
1. 재사용을 위해 하단바 숨김 로직이 작성될 파일을 생성한다.
- 나는 useTabBarVisibility.js 로 선언하였다.
2. navigation 기능을 조작하기 위해 useNavigation을 import 한다.
useNavigation | React Navigation
useNavigation에 대한 내용을 확인할 수 있는 공식 문서 페이지.
공식 설명
useNavigation객체 에 대한 접근을 제공하는 hook.prop을 컴포넌트에 직접
navigation전달할 수 없거나 깊이 중첩된 자식의 경우 전달하고 싶지 않을 때 유용
아무래도 객체와 연관이 없는 별도의 Component이기 때문에 navigation에 접근하기 위해선 필수로 사용해야 한다.
3. Props로 visible(보임 여부)를 받아오는 Component 함수를 선언하자.
- 해당 Props를 통해 추후 Component에서 하단바 여부를 확인할 수 있다.
4. 본격적으로 하단바를 control 하는 로직에 대한 내용을 작성해보자
1) useLayoutEffect() 를 통해 화면이 그려지기 전 하단바 여부를 판독하자.
- [navigation, visible] 를 통해 navigation을 받아와 읽을 때, 하단바 보임 여부가 변경될 때마다 실행한다!
2) 네비게이션 구조 파악하기
const parentNavigator = navigation.getParent();를 통해 해당 Screen을 포함하는 하단바의 여부를 저장하자.
- if()를 통해 하단바가 존재할 경우 실행되는 로직을 작성한다.
- 처음 받아온 visible 여부에 따라 보이거나, 보이지 않는 로직이 실행된다!
// 하단바를 숨기거나 나타나게 하는 로직 Component 입니다.
// 필요시 import 후, 해당 Component에서
// useTabBarVisibility(true/false); 로 사용할 수 있습니다
import { useLayoutEffect } from "react";
import { useNavigation } from "@react-navigation/native";
const useTabBarVisibility = (visible) => {
const navigation = useNavigation();
// 화면이 그려지기 전 여부를 판독해야 하기 때문에 useLAyoutEffect를 사용한다.
useLayoutEffect(() => {
// 변경하려는 Screen을 담은 변수
const parentNavigator = navigation.getParent();
if (parentNavigator) {
parentNavigator.setOptions({
// 실제 사용하고 있는 하단바 스타일
tabBarStyle: {
display: visible
? {
height: 60,
borderTopStartRadius: 20,
borderTopEndRadius: 20,
position: "absolute",
}
: "none",
},
});
}
// 다른 스크린으로 이동 시 다시 Tab Bar가 보임
return () => {
if (parentNavigator) {
parentNavigator.setOptions({
tabBarStyle: {
height: 60,
borderTopStartRadius: 20,
borderTopEndRadius: 20,
position: "absolute",
},
});
}
};
}, [navigation, visible]);
};
export default useTabBarVisibility;…라는 복잡한 내용이 담긴 코드의 내용이다.
장황하게 썼지만, 그냥 긁어서 사용해보고 입맛대로 수정하는 것이 제일 편하다!
5. 사용하고 싶은 Component에서 import 후 visible 여부를 작성하자.
- 나는 홈 화면에서 검색창으로 넘어갈 때 하단바를 숨기고 싶어서 이 기능을 만들게 되었다.
import useTabBarVisibility from "../../../assets/styles/ReuseComponents/useTabBarVisibility ";
...
// Component 내 작성될 내용
useTabBarVisibility(false);이렇게 선언하면 하단바를 숨길 수 있게 된다!!!
👏👏👏👏👏
정말 길고 길었다…이젠 Tab Bar를 눌렀을 때 해당하는 Tab의 메인 Screen으로 이동되는 로직을 작성할 예정이다.
생각보다 길어지는 바람에 다음 포스트에서…계속
