React Native实现搜索结果一键选中的解决方案

这个问题的核心是TextInput仍处于焦点状态，第一次点击搜索结果区域时，系统会优先处理输入框的失焦操作，而非触发Pressable的点击事件，导致需要两次点击才能选中目标。要实现一键选中，只需在点击搜索结果时先让输入框失去焦点，具体修改步骤如下：

1. 添加TextInput引用 #

在组件中通过useRef创建一个指向TextInput的引用：

import { useRef } from 'react';
// ... 其他导入

const YourComponent = () => {
  const searchInputRef = useRef(null); // 新增输入框引用
  // ... 其他状态和方法定义
}

2. 修改点击回调逻辑 #

在handleBrandSelection方法中，先调用输入框的blur()方法强制失焦，再执行原有选中逻辑：

const handleBrandSelection = (item) => {
  searchInputRef.current?.blur(); // 先让输入框失焦
  // ... 你的原有业务逻辑（比如页面跳转、状态更新等）
}

3. 绑定引用到TextInput #

把创建好的ref绑定到目标TextInput组件上：

<TextInput
  placeholder="Search..."
  onChangeText={(text) => setSearchValue(text)}
  value={searchValue}
  style={tw`bg-white p-2 bg-white relative`}
  ref={searchInputRef} // 绑定引用
/>

修改后的完整代码示例 #

import { useRef, useState } from 'react';
import { View, TextInput, FlatList, Pressable, Image } from 'react-native';
import FontAwesome from '@expo/vector-icons/FontAwesome';

const YourComponent = () => {
  const searchInputRef = useRef(null);
  const [searchValue, setSearchValue] = useState('');
  const [cars, setCars] = useState([]);
  const [brands, setBrands] = useState([]);
  const [carOnly, setCarOnly] = useState(false);

  const handleBrandSelection = (item) => {
    searchInputRef.current?.blur();
    // 这里替换成你的实际选中逻辑，比如跳转对应页面
    console.log('选中品牌:', item.document.name);
  };

  return (
    <>
      <View style={tw`flex-row items-center bg-white w-full px-3`}>
        <FontAwesome name="search" size={20} color="gray" />
        <TextInput
          placeholder="Search..."
          onChangeText={(text) => setSearchValue(text)}
          value={searchValue}
          style={tw`bg-white p-2 bg-white relative`}
          ref={searchInputRef}
        />
      </View>

      {cars.length > 0 && (
        <View style={tw`bg-white p-1 bg-white opacity-95 z-10 absolute top-10 w-full`}>
          {!carOnly && (
            <FlatList
              data={brands}
              renderItem={({ item }) => (
                <Pressable
                  onPress={() => handleBrandSelection(item)}
                >
                  <View style={tw`flex-row gap-2 items-center p-2`}>
                    <View style={tw`w-15 h-8 items-center`}>
                      {item.document.mark && (
                        <Image
                          style={{
                            flex: 1,
                            width: undefined,
                            height: undefined,
                            resizeMode: 'contain',
                            alignSelf: 'stretch',
                          }}
                          source={{
                            uri: `${process.env.EXPO_PUBLIC_IMAGES_URL}/${item.document.mark}-sm.png`,
                          }}
                        />
                      )}
                    </View>
                    <View>
                      <Text key={item.document.id}>{item.document.name}</Text>
                    </View>
                  </View>
                </Pressable>
              )}
            />
          )}
        </View>
      )}
    </>
  );
};

export default YourComponent;

修改完成后，用户点击搜索结果时，输入框会立即失焦并同步触发选中逻辑，一次点击即可完成操作。

内容的提问来源于stack exchange，提问作者Kos-Mos