如何让屏幕底部的react-native-autocomplete-input在键盘弹出时显示结果列表？

我之前也碰到过一模一样的坑，试了好几种方法才搞定，给你几个亲测有效的解决方案：

方案1：用官方KeyboardAvoidingView替代KeyboardSpacer（首推） #

KeyboardSpacer在不同RN版本、不同平台上兼容性经常出问题，换成官方的KeyboardAvoidingView会稳定很多。把整个Autocomplete相关区域包裹进去，再根据平台设置对应的behavior属性：

import React, { Component } from 'react';
import { View, ScrollView, Platform, TouchableOpacity, Text, KeyboardAvoidingView } from 'react-native';
import styles from './styles';
import Autocomplete from 'react-native-autocomplete-input';

class YourComponent extends Component {
  state = {
    query: '',
    data: [] // 这里替换成你的数据源
  };

  handleSelectItem = (item) => {
    // 处理选中项的逻辑
    this.setState({ query: item.name });
  };

  render() {
    const { query, data } = this.state;
    return (
      <KeyboardAvoidingView
        style={{ flex: 1 }}
        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
        keyboardVerticalOffset={Platform.OS === 'ios' ? 64 : 0} // 根据你的导航栏高度调整数值
      >
        <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
          {/* 页面其他组件 */}
          <Autocomplete
            autoCapitalize="none"
            autoCorrect={false}
            containerStyle={styles.autocompleteContainer}
            inputContainerStyle={styles.inputContainer}
            listContainerStyle={styles.listContainer}
            listStyle={styles.list}
            onChangeText={(text) => this.setState({ query: text })}
            placeholder="输入关键词搜索..."
            value={query}
            data={data}
            renderItem={({ item }) => (
              <TouchableOpacity onPress={() => this.handleSelectItem(item)}>
                <Text style={styles.itemText}>{item.name}</Text>
              </TouchableOpacity>
            )}
          />
        </ScrollView>
      </KeyboardAvoidingView>
    );
  }
}

配套的样式可以这么调整，确保列表定位在输入框下方且不会被遮挡：

// styles.js
export default {
  autocompleteContainer: {
    flex: 1,
    marginTop: 10,
    width: '100%',
  },
  inputContainer: {
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 4,
    paddingHorizontal: 10,
    height: 40,
    backgroundColor: '#fff',
  },
  listContainer: {
    position: 'absolute',
    top: 45, // 刚好贴在输入框下方
    left: 0,
    right: 0,
    maxHeight: 200, // 限制列表最大高度，避免超出屏幕
    backgroundColor: '#fff',
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 4,
    zIndex: 100, // 确保列表在最上层
  },
  list: {
    paddingHorizontal: 10,
  },
  itemText: {
    paddingVertical: 8,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
};

方案2：调整Autocomplete的内置FlatList属性 #

如果方案1还没解决，可以试试配置Autocomplete的flatListProps，控制列表的滚动和布局逻辑：

<Autocomplete
  // 其他已有props...
  flatListProps={{
    keyboardShouldPersistTaps: 'handled', // 点击列表时键盘不收起
    style: { maxHeight: 200 },
    contentContainerStyle: { paddingBottom: 10 },
  }}
/>

方案3：手动监听键盘事件动态调整 #

要是上面的方法都不行，就手动监听键盘弹出/收起事件，动态修改列表的底部间距：

import { Keyboard } from 'react-native';

class YourComponent extends Component {
  state = {
    query: '',
    data: [],
    keyboardHeight: 0,
  };

  componentDidMount() {
    this.keyboardShowListener = Keyboard.addListener('keyboardDidShow', this.handleKeyboardShow);
    this.keyboardHideListener = Keyboard.addListener('keyboardDidHide', this.handleKeyboardHide);
  }

  componentWillUnmount() {
    this.keyboardShowListener.remove();
    this.keyboardHideListener.remove();
  }

  handleKeyboardShow = (event) => {
    this.setState({ keyboardHeight: event.endCoordinates.height });
  };

  handleKeyboardHide = () => {
    this.setState({ keyboardHeight: 0 });
  };

  render() {
    return (
      <Autocomplete
        // 其他已有props...
        listContainerStyle={{
          maxHeight: 200,
          marginBottom: this.state.keyboardHeight,
        }}
      />
    );
  }
}

另外要注意：一定要给外层ScrollView加上contentContainerStyle={{ flexGrow: 1 }}，保证内容能撑满容器，不会被键盘压缩。

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