如何在滚动视图内放置的可触摸不透明度上只点击一次？

Question

我已经研究过关于该主题的类似问题，所以请不要急于关闭这个问题。

我有一个搜索屏幕，我可以在其中键入搜索词并获取列出的结果。获取后，我想点击其中任何一个并导航到该页面详细信息对象。我最初的第一次点击从未被检测到，但我的第二次点击是。我的组件：

return (
  <View>
    <TextInput
      value={query}
      placeholder="Type Here..."
      onChangeText={(search) => setQuery(search)}
    />
    {fetching ? (
      <Spinner
        visible={fetching}
        textContent={'Fetching data...'}
        textStyle={{ fontSize: 14 }}
      />
    ) : null}
    {items ? (
      <ScrollView keyboardShouldPersistTaps={true}>
        <FlatList
          numColumns={1}
          horizontal={false}
          data={items}
          keyExtractor={(item) => item.id}
          renderItem={({ item }) => (
            <TouchableOpacity
              onPress={() =>
                navigation.navigate('Item Details', { id: item.id })
              }>
              <ItemDisplay item={item} keyboardShouldPersistTaps="always" />
            </TouchableOpacity>
          )}
        />
      </ScrollView>
    ) : null}
  </View>
);

我的 ItemDisplay 只是一行项目的照片和项目的 id。没什么好看的。

根据类似问题的建议，我确实使用了 <ScrollView keyboardShouldPersistTaps={true}> 和 <ItemDisplay item={item} keyboardShouldPersistTaps="always" /> 但是这对我没有帮助，我仍然需要点击两次。关于如何解决这个问题的任何想法？如果重要的话，我正在 android 上对其进行测试。

我也试过 <ScrollView keyboardDismissMode="on-drag" keyboardShouldPersistTaps={"always"} > 但这也无济于事。

Answer 1

如果我对你的问题的理解正确，那么你在使用键盘时单击某个项目时遇到了问题。

如果是这样，您只需将 keyboardShouldPersistTaps 作为 always 传递给您的 FlatList，然后列表的子项将在按下某个项目时收到点击。

此外，您不应该使用 ScrollView 来包裹您的 Flatlist，如果它们的方向相同，则不需要 numColumns，因为您已通过它作为 1

您可以在 https://reactnative.dev/docs/0.64/scrollview#keyboardshouldpersisttaps

阅读有关 keyboardShouldPersistTaps 的更多信息

看看这个 Live Snack 看看它的实际效果。

如何在滚动视图内放置的可触摸不透明度上只点击一次？

How do I tap only once on touchable opacity placed inside a scrollview?

reactjs

react-native

scrollview