react-native-autocomplete-input建议列表错位：首项搜索却显示在末项

核心原因 #

多个Autocomplete实例共享了相同的定位上下文，或是没有为每个列表项创建独立的引用/状态来管理建议列表的锚点位置，导致建议列表的定位逻辑混乱。

具体解决方法 #

1. 为每个卡片项分配独立的状态与引用 #

循环渲染卡片时，让每个Autocomplete组件拥有专属的输入状态和DOM引用，避免状态复用引发的位置错误：

import React, { useState, useRef } from 'react';
import { View, TextInput, StyleSheet, TouchableOpacity, Text } from 'react-native';
import Autocomplete from 'react-native-autocomplete-input';

// 单个卡片组件，内部维护独立的Autocomplete状态
const ItemCard = ({ item, suggestions }) => {
  const [query, setQuery] = useState('');
  const autocompleteRef = useRef(null);

  // 过滤当前项的建议列表
  const filteredSuggestions = suggestions.filter(suggestion =>
    suggestion.toLowerCase().includes(query.toLowerCase())
  );

  return (
    <View style={styles.card}>
      <TextInput placeholder="其他输入项" style={styles.input} />
      <Autocomplete
        ref={autocompleteRef}
        autoCapitalize="none"
        autoCorrect={false}
        containerStyle={styles.autocompleteContainer}
        inputContainerStyle={styles.inputContainer}
        data={filteredSuggestions}
        defaultValue={query}
        onChangeText={text => setQuery(text)}
        placeholder="搜索..."
        renderItem={({ item }) => (
          <TouchableOpacity onPress={() => setQuery(item)}>
            <Text style={styles.suggestionItem}>{item}</Text>
          </TouchableOpacity>
        )}
      />
    </View>
  );
};

// 父组件循环渲染所有卡片
const ParentComponent = () => {
  const items = [/* 你的数据项数组 */];
  const globalSuggestions = ['选项A', '选项B', '选项C'];

  return (
    <View style={styles.container}>
      {items.map((item, index) => (
        <ItemCard key={index} item={item} suggestions={globalSuggestions} />
      ))}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
  },
  card: {
    backgroundColor: '#fff',
    padding: 16,
    borderRadius: 8,
    marginBottom: 12,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
  input: {
    height: 40,
    borderColor: '#ccc',
    borderWidth: 1,
    borderRadius: 4,
    paddingHorizontal: 8,
    marginBottom: 12,
  },
  autocompleteContainer: {
    // 不要设置固定top/left，让组件自动锚定当前输入框
    position: 'relative',
  },
  inputContainer: {
    height: 40,
    borderColor: '#ccc',
    borderWidth: 1,
    borderRadius: 4,
    paddingHorizontal: 8,
  },
  suggestionItem: {
    padding: 12,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
});

2. 修正样式定位逻辑 #

检查Autocomplete的containerStyle，不要设置全局固定的top或left值，让组件默认锚定在自身输入框下方。如果需要自定义定位，要基于当前卡片容器计算相对位置，而非全局定位。

3. 禁止共享状态 #

不要在父组件中用单个query状态控制所有Autocomplete，每个卡片必须维护自己的输入状态，否则会导致所有组件的建议列表联动，位置彻底混乱。

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