如何檢查 react-native 中的組件是否按下？

Question

我做了一個自定義 select 但如果我在 select 或選項之外按，我會遇到關閉它的問題。 基本上“按鈕”是一個TouchableOpacity ，當我點擊它時，會出現選項列表。 但是現在我只能通過選擇一個選項或單擊 select 按鈕來關閉它。 有沒有辦法檢查我是否在 TouchableOpacity 之外單擊？ 在簡單的反應中，您可以為組件提供一個 Id 並檢查它 onClick 事件以查看您單擊的內容。 或者你可以使用 react 的useRef鈎子，它似乎不適用於 react-native。 我有這個代碼（簡化）：

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>)

如您所見，只有按下 select 按鈕或選項時，您才能調用toggle 。 當我在TouchableOpacity框外單擊時，我想調用setIsOpen(false) 。

有沒有辦法或圖書館做到這一點？

Answer 1

首先，切換 function 的正確用法是

setIsOpen(prevIsOpen => !prevIsOpen);

關於你的問題。 只需將所有屏幕包裝成可觸摸的組件，無需任何反饋。

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

Answer 2

你可以使用 TouchableWithoutFeedback