React Native에서 모달을 전역적으로 제어(refs 사용)

이 문서에서는 상태 및 컨텍스트 데이터를 전달하는 대신 모든 구성 요소의 참조를 사용하여 React Native 모달을 시작하는 방법에 대한 간단한 예를 보여줍니다.

왜요?

Modals에 관한 공식 React Native 문서에서 상태를 사용하고 props를 통해 데이터를 전달하여 모달 가시성 콘텐츠 및 데이터를 제어할 수 있지만 참조를 RN Modal 구성 요소에 직접 전달할 수는 없음을 알고 있습니다. 이는 더 크고 복잡한 프로젝트의 경우 전역 수준에서 모달을 제어하려는 경우 다음 중 일부를 수행할 수 있음을 의미합니다.

구성 요소를 통해 소품 전달(많은 구성 요소)

컨텍스트 및 리듀서를 통해 모달 상태 관리 구현

이를 처리할 수 있는 타사 패키지를 사용하십시오(기본 동작 및 UI를 사용자 정의하는 방법을 제공하는 측면에서 제한적일 수 있음)

.

이제 질문은 사용자 지정 모달 구성 요소를 한 번만 만들고 복잡한 소품 전달이나 컨텍스트 사용에 의존하지 않도록 방법을 구현할 수 있다면 어떨까요?

서로 다른 구성 요소 간에 어디에서나 간단한 .showModal(data) 메서드 호출이 완벽할 것이며 이 블로그에서 공유할 주제입니다.

일부 면책 조항

이것은 아마도 React Native를 처음 사용하는 사람들을 위한 것은 아니지만 refs로 사용자 정의 기능을 구현한다는 아이디어에 대한 훌륭한 개방자입니다. 이 블로그의 내용은 여러 구성 요소에서 동일한 모달을 사용하는 더 큰 프로젝트에 더 잘 적용됩니다. 앱이 단순하다면 더 간단한 구현을 고수하는 것이 더 나을 것입니다.

구현

1) 커스텀 모달 만들기

React Native 문서에서 rawexample here를 수정했습니다.

2) modalRef를 추가한 다음 후크 useImperativeHandle 및 forwardRef()를 추가합니다.

const CustomModal = () => {
    const [modalVisible, setModalVisible] = useState(false);
    const modalRef = useRef<CustomModalRef>();

    useImperativeHandle(
        modalRef,
        () => ({
            show: () => {
                setModalVisible(true);
            },
            hide: () => {
                setModalVisible(false);
            },
        }),
        []
    );
   // rest of your code
}

export default forwardRef(CustomModal);

저는 Typescript를 사용하므로 당신도 사용한다면 CustomModalRef에 이 유형을 사용할 수 있습니다.

export type CustomModalRef = {
    show: () => void
    hide: () => void
}

3) 모달 참조를 관리하기 위해 정적 변수 및 함수를 사용할 모달 컨트롤러 클래스를 만듭니다.

import { MutableRefObject } from "react"

export type CustomModalRef = {
    show: () => void
    hide: () => void
}

export default class ModalController { 
    static modalRef: MutableRefObject<CustomModalRef>;
    static setModalRef = (ref: any) => {
        this.modalRef = ref
    }

    static showModal = () => {
        this.modalRef.current?.show()
    }

    static hideModal = () => {
        this.modalRef.current?.hide()
    }
}

showModal 및 hideModal 정적 메서드는 선택 사항일 수 있으며 current.show를 직접 호출할 수 있지만 더 많은 사용자 정의 기능을 제공하기 위해 메서드를 생성하기로 했습니다.

4) Custom Modal의 모달 참조를 Modal Controller 클래스의 정적 변수에 할당합니다.

const CustomModal = () => {
    const [modalVisible, setModalVisible] = useState(false);
    const modalRef = useRef<CustomModalRef>();

    useLayoutEffect(() => {
        ModalController.setModalRef(modalRef)
    }, [])

    useImperativeHandle(
    // rest of the code

ref 값을 업데이트하기 때문에 useLayoutEffect를 사용했습니다. useEffect와 useLayoutEffect의 차이점에 대해 읽을 수 있습니다. Kent C. Dodds의 이 훌륭한 내용blog을 확인할 수 있습니다.

5) 최상위 구성 요소(일반적으로 App.tsx)에서 구성 요소를 선언합니다.

export default function App() {  
    return <NavigationContainer>
    <MainStack/>
    <CustomModal/>
  </NavigationContainer>
}

6) ModalController 클래스를 사용하여 모달을 표시하거나 숨깁니다.
구성 요소에서 사용(SomeScreen.js)

/* 
* Component code/logic in between
*/
return (
 <SomeComponent/>
 <Button 
  title="Show modal" 
  onPress={() => {
    ModalController.showModal();
  }} 
 />
)

이것은 아래 GIF에서 예상되는 동작 쇼입니다.

추천

이제 이 개념을 확장하여 새로운 타사 라이브러리나 모달을 관리하기 위해 특별히 만든 컨텍스트 공급자 설정을 추가하지 않고도 쉽게 호출할 수 있는 매우 유연한 전역 모달을 만드는 문자열 메시지와 같은 데이터를 허용할 수 있습니다. 이것을 확인할 수 있습니다Github repository. 이 정확한 예를 보여 주지만 메시지 매개변수를 추가하여 만들었습니다. 이 리포지토리를 복제하고 상용구 분기에서 체크아웃할 수 있습니다.

시간을 내어 읽어주셔서 감사합니다. 도움이 되었기를 바랍니다.

귀하의 지원은 대단히 감사하겠습니다. 나에게 커피를 사주는 것은 많은 것을 의미할 것이다
https://www.buymeacoffee.com/royce.chua

이 블로그는 아마 곧 Youtube에 비디오가 게시될 것입니다. 라는 내 블로그를 보완할 을(를) 구성하고 있습니다. 곧 일부 콘텐츠를 방문하십시오.