React Native中react-native-autocomplete-input使用问题求助

云上老周

2026-8-27

react-native-autocomplete-input 两个异常问题修复方案

问题根因

键盘输入后自动收起：flatListProps内的keyExtractor写法错误，回调参数顺序搞反，将数字类型的索引idx当做列表项取Water_Source_Code属性，最终所有列表项返回的key都是undefined。每次输入触发状态更新重渲染时，列表Diff逻辑完全失效，整个Autocomplete组件被重复卸载、重建，输入框直接失焦触发键盘收起。
RTL从右到左对齐不生效：该组件默认的输入框、下拉结果容器样式没有适配RTL规则，不会自动继承全局RTL配置，需要手动传入样式覆盖默认值。

修复后完整代码

<Autocomplete
  data={
    autoCompleteWaterSourceData?.length === 1 && autoCompleteWaterSourceData[0]
      ? []
      : autoCompleteWaterSourceData
  }
  placeholder={placeholder1}
  value={querySourceCode}
  autoCorrect={false}
  onChangeText={setQuerySourceCode}
  // 输入框容器RTL配置
  inputContainerStyle={{
    direction: 'rtl'
  }}
  // 输入框文本RTL配置
  style={{
    textAlign: 'right',
    writingDirection: 'rtl'
  }}
  // 下拉列表容器RTL配置
  listContainerStyle={{
    direction: 'rtl'
  }}
  flatListProps={{
    keyboardShouldPersistTaps: 'always',
    // 修正keyExtractor：直接取列表项的唯一编码作为key
    keyExtractor: (item) => item.Water_Source_Code,
    style: {
      direction: 'rtl'
    },
    contentContainerStyle: {
      alignItems: 'flex-end'
    },
    renderItem: ({ item: { Water_Source_Code, Water_Source_Name } }) => (
      <TouchableOpacity
        onPress={() =>
          setQuerySourceCode(`${Water_Source_Code} ${Water_Source_Name}`)
        }
      >
        <Text style={[styles.autoCompleteText, { textAlign: 'right' }]}>
          {`${Water_Source_Code} ${Water_Source_Name}`}
        </Text>
      </TouchableOpacity>
    )
  }}
/>