TIL: RN | ReactNavigation Composite Navigation 여러개..

Lumpen·2023년 5월 30일
0

ReactNavigation

목록 보기
13/14

oh..
ReactNavigation 의 인자로 NativeStackNavigationProp 제네릭에 유니온 타입을 줄 수 있다

main 네비게이션 하위에 4개의 탭이 있을 경우
원래 각각의 composite type 을 4개 만들어야하나 고민하였으나
main 하나에 나머지를 유니온으로 주면 composite type 하나로 사용 가능하다..

type CompositeNavigationType = CompositeNavigationProp<
  NativeStackNavigationProp<MainNavigationType>,
  NativeStackNavigationProp<
    | Tab1Type
    | Tab2Type
    | Tab3Type
    | Tab4Type
  >
>;
첫 진입 시 렌더링이 일어나지 않은 
화면으로의 이동을 시도할 경우
매인 탭 하위 2뎁스 부터는 바로 진입이 불가능하다
아직 이동할 화면이 렌더되지 않았기 때문
->  param 혹은 state 로 데이터를 받아서 하위 페이지로의 이동이 있을 경우 해당 navigator 에서 이동을 하는 방향으로 하는 것도 괜찮은 방법.....이지 않을까 싶다
type ParamList = {
    Detail: DetailTabNavigationType;
  };
  const route = useRoute<RouteProp<ParamList>>();
  const navigation =
    useNavigation<NativeStackNavigationProp<TabNavigationType>>();
  const { isNavigate, pathName } = route.params ?? {};

  React.useEffect(() => {
    if (isNavigate && pathName) navigation.navigate(pathName as never); // string 이 아니면 type error 발생..
  }, [navigation]);
profile
떠돌이 생활을 하는. 실업자는 아니지만, 부랑 생활을 하는

0개의 댓글