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>
);
}
```