개발자

React Native Tooltip 만드는 방법 아시는분 계실까요?(바깥 클릭시 닫히는 UI)

2023년 02월 16일조회 601

리액트 네이티브 에서 툴팁을 직접 만드려고 하는데요. 바깥 클릭시 닫히고, 안쪽을 클릭할 시 닫히면 안되는 ui 를 만들어야 합니다. 툴팁 뒷편에 버튼을 만들어서 클릭 시 닫히도록 하려고 해도, absolute를 넣으면 맨 앞으로 나오거나, 다른 ui에 가려져서 만들기가 어렵네요.. 브라우저 같은 경우 ref.current.contain 으로 바깥 클릭을 인식할 수 있었는데, 리액트 네이티브에서는 어려운걸까요?

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 1

황민호님의 프로필 사진

React Native에서 제공하는 TouchableWithoutFeedback 을 한번 사용해 보시겠어요? 아래는 useRef를 사용하여 툴팁 요소에 대한 참조를 만들고, useEffect를 사용하여 툴팁 외부에서 클릭할 수 있는 글로벌 이벤트 리스너를 추가하는 예제입니다. https://snack.expo.dev/N3jzGG1ok Tooltip.js ```javascript import React, { useState, useRef, useEffect } from 'react'; import { View, Text, TouchableWithoutFeedback } from 'react-native'; const Tooltip = ({ children, tooltipText }) => { const [open, setOpen] = useState(false); const tooltipRef = useRef(null); useEffect(() => { const handleClickOutside = (event) => { if (tooltipRef.current && !tooltipRef.current.contains(event.target)) { setOpen(false); } }; document.addEventListener('mousedown', handleClickOutside); return () => { document.removeEventListener('mousedown', handleClickOutside); }; }, [tooltipRef]); return ( <View> <TouchableWithoutFeedback onPress={() => setOpen(!open)}> {children} </TouchableWithoutFeedback> {open && ( <View ref={tooltipRef}> <Text>{tooltipText}</Text> </View> )} </View> ); }; export default Tooltip; ``` App.js ```javascript import { Text, View } from 'react-native'; import Tooltip from './Tooltip'; export default function App() { return ( <View> <Text>Click the button to show tooltip</Text> <Tooltip tooltipText="Hello, I'm a tooltip!"> <Text>Hover me to see the tooltip</Text> </Tooltip> </View> ); } ```

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

목록으로
키워드로 질문 모아보기

실무, 커리어 고민이 있다면

새로운 질문 올리기

지금 가입하면 모든 질문의 답변을 볼 수 있어요!