javascript - Hur kontrollerar man om man trycker utanför en komponent i react-native?

Jag gjorde ett anpassat val men jag har problemet att stänga det om jag trycker utanför valet eller alternativen. Grundläggande är att "knappen" är en TouchableOpacity och när jag klickar på den visas listan med alternativ. Men nu kan jag bara stänga den genom att välja ett alternativ eller klicka tillbaka på valknappen. Finns det ett sätt att kolla om jag klickar utanför TouchableOpacity eller inte? I enkel react kan du ge komponenten ett Id och kolla dess onClick-event för att se vad du har klickat på. Eller så kan du använda react's useRef-hook vilket inte verkar fungera med react-native. Jag har denna kod (förenklad):

const [isOpen, setIsOpen] = useState(false)
const toggle = () => { setIsOpen(!isOpen)}
//...
return (<View>
  <TouchableOpacity onPress={toggle}>
    <Text>Open select</Text>
  </TouchableOpacity>
  <View>
    {isOpen && options.map(({value, label}) => <View key={value} onPress={toggle}>{label}</View>)}
  </View>
</View>)

Som du kan se kan du endast kalla toggle om du trycker på välj-knappen eller ett alternativ. Jag vill kalla setIsOpen(false) när jag klickar utanför TouchableOpacity-rutan.

Finns det ett sätt eller bibliotek för att göra det?

Svar #1

Din säkraste bud är att använda OutsidePressHandler

Svar #2

Först och främst är korrekt användning för växelfunktionen

setIsOpen(prevIsOpen => !prevIsOpen);

Och angående din fråga. Omslut bara hela skärmen med en tryckbar komponent utan någon återkoppling.

const close = () => isOpen && setIsOpen(false);

return (
    <TouchableWithoutFeedback onPress={close} style={{ flex: 1 }}>
      <View>
        <TouchableOpacity onPress={toggle}>
          <Text>Open select</Text>
        </TouchableOpacity>
        <View>
          {isOpen && options.map(({value, label}) => <View key={value} onPress={toggle}>{label}</View>)}
        </View>
      </View>
    </TouchableWithoutFeedback>
);

Relaterade artiklar