React Native自定义renderItem后Autocomplete选项无法点击

核心原因 #

自定义renderItem时仅渲染了无交互能力的Text组件，未包裹可响应点击的容器，导致点击事件无法触发。

修复方案 #

给每个建议项包裹TouchableOpacity（或TouchableHighlight等Touchable系列组件），并绑定点击回调：

1. 先导入TouchableOpacity：

import { TouchableOpacity, Text } from 'react-native';

2. 修改renderItem：

renderItem={(item) => (
  <TouchableOpacity 
    style={{ paddingVertical: 8, paddingHorizontal: 12 }}
    onPress={() => {
      console.log('选中的选项:', item);
      // 可选：点击后可添加清空输入框、选中填充等逻辑
      // setInputValue(item);
    }}
  >
    <Text>{item}</Text>
  </TouchableOpacity>
)}

备选方案（组件支持的情况） #

如果react-native-autocomplete-input版本支持onItemPress属性，也可以直接通过该属性绑定点击逻辑，无需在renderItem里单独处理：

<Autocomplete
  data={yourFilteredData}
  value={inputValue}
  onChangeText={(text) => setInputValue(text)}
  onItemPress={(item) => console.log('选中的选项:', item)}
  renderItem={(item) => <Text style={{ padding: 10 }}>{item}</Text>}
/>

额外检查点 #

• 确认TouchableOpacity等组件已正确导入，这是React Native实现可点击元素的基础。
• 排查布局层级，确保建议项区域未被其他组件遮挡，否则也会导致点击无响应。

内容的提问来源于stack exchange，提问作者Austin GC