개발자
React Native Tooltip 만드는 방법 아시는분 계실까요?(바깥 클릭시 닫히는 UI)
리액트 네이티브 에서 툴팁을 직접 만드려고 하는데요. 바깥 클릭시 닫히고, 안쪽을 클릭할 시 닫히면 안되는 ui 를 만들어야 합니다. 툴팁 뒷편에 버튼을 만들어서 클릭 시 닫히도록 하려고 해도, absolute를 넣으면 맨 앞으로 나오거나, 다른 ui에 가려져서 만들기가 어렵네요.. 브라우저 같은 경우 ref.current.contain 으로 바깥 클릭을 인식할 수 있었는데, 리액트 네이티브에서는 어려운걸까요?
1return (
2 <View>
3
4 ... 다른 뷰들
5
6 <Pressable onPress={() => setOpen(true)>툴팁on 버튼</Pressable>
7 {open && <View>툴팁 absolute 박스</View>}
8 <Pressable onPress={() => setOpen(false)}>툴팁 배경,</Pressable>
9
10// absolute로 화면 전체를 채웠었음. 클릭시 툴팁이 닫히도록 하는 걸 만들어 보았으나 나중에 선언되어 툴팁을 가려서 실패, 맨위로 올려서 해보았으나 다른 컴포넌트가 위로 올라와서 실패
11
12 </View>
13);
답변 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> ); } ```
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
지금 가입하면 모든 질문의 답변을 볼 수 있어요!