React Native에서 제공하는 TouchableWithoutFeedback 을 한번 사용해 보시겠어요? 아래는 useRef를 사용하여 툴팁 요소에 대한 참조를 만들고, useEffect를 사용하여 툴팁 외부에서 클릭할 수 있는 글로벌 이벤트 리스너를 추가하는 예제입니다. 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> ); } ```

다음 내용이 궁금하다면?

또는

이미 회원이신가요?

2023년 2월 16일 오후 5:58

조회 2,392

댓글 0