使键盘在react-native

Question

我正在尝试使用react-native-paper中的TextInput创建自定义自动完成视图，我希望ScrollView在TextInput下面具有建议列表，以显示在键盘上方，以便用户可以在输入内容的同时键入并查看建议

代码接近：

import React, { Component } from 'react'
import { ScrollView, View, Keyboard, KeyboardAvoidingView, Animated, findNodeHandle } from 'react-native'
import { TextInput, List, Text, Colors, Divider } from 'react-native-paper'
import theme from '../Theme';
import PropTypes from 'prop-types';


export class AutocompleteTextInput extends Component {

  constructor(props) {
      super(props)
      this.state = {
          data: this.props.data != undefined? this.props.data : [{a: "aa"}, {a: "bb"}],
          query: this.props.query != undefined? this.props.query : "",
          label: this.props.label != undefined? this.props.label : "",
          showAutocomplete: true,
          keyboardVisible: true,
          found: ""
      }
      this.menu = null;
      this.paddingInput = new Animated.Value(0);
      this.keyboardPadding = new Animated.Value(0);
  }

  componentWillMount() {
      this.keyboardDidShowListener = Keyboard.addListener("keyboardDidShow", this.onKeyboardVisible.bind(this))
      this.keyboardDismissListener = Keyboard.addListener("keyboardDidHide", this.onKeyboardDismiss)
  }

  componentWillUnmount() {
      this.keyboardDidShowListener.remove()
      this.keyboardDismissListener.remove()
  }

  /*autoSuggest = () => {
   //   HereGeoService.getSuggessionsByQuery()
  }*/

  showAutocomplete = () => {
      this.setState({ showAutocomplete: true })
  }

  hideAutocomplete = () => {
      this.setState({ showAutocomplete: false })
  }


  onKeyboardVisible = (event) => {
    console.log("Keyboard: visible")
    this.setState({keyboardVisible: true, showAutocomplete: true})
    Animated.timing(this.paddingInput, {
        duration: 50,
        toValue: event.endCoordinates.height - (event.endCoordinates.height * 0.5)
    }).start()
  }

  onKeyboardDismiss = (event) => {
    console.log("Keyboard: dismissed")
    this.setState({keyboardVisible: false, showAutocomplete: false})
    Animated.timing(this.paddingInput, {
        duration: 50,
        toValue: 0
    }).start()
  }


  onValueChosen = () => {
      if(this.props.onValueChanged != undefined) {
        this.props.onValueChanged(this.state.found)
      }
  }

  search = async () => {
        /*if(this.props.searchFunc) {
           await this.props.searchFunc()
        }*/

  }

  render() {
    return (
       <View style={{ flex: 1 }}>
                <KeyboardAvoidingView>
                    <ScrollView nestedScrollEnabled>
                        <TextInput onEndEditing={Keyboard.dismiss} mode="outlined" onChangeText={(K) => {
                                    console.log(K)
                                }} label={this.state.label}/>
                                {this.state.showAutocomplete == true?
                                    (<Animated.View style={{ height: 100, marginBottom: this.paddingInput }}>
                                        <ScrollView ref='list' overScrollMode="auto" nestedScrollEnabled={true} style={{ flex: 1 }}>
                                            <List.Item style={{ color: theme.colors.primary }} onPress={ () => {}} title="aaaaa"></List.Item>
                                            <Divider></Divider>
                                            <List.Item style={{ color: theme.colors.primary }} onPress={ () => {}} title="aaaaa"></List.Item>
                                            <Divider></Divider>
                                            <List.Item style={{ color: theme.colors.primary }} onPress={ () => {}} title="bbbbb"></List.Item>
                                            <Divider></Divider>
                                        </ScrollView>
                                    </Animated.View>
                                    )
                                    :
                                    <View style={{ width: 0, height: 0 }}></View>
                                }
                    </ScrollView>
                </KeyboardAvoidingView>
       </View>
    )
  }
}

AutocompleteTextInput.propTypes = {
    label: PropTypes.string.isRequired,
    query: PropTypes.string.isRequired,
    data: PropTypes.array.isRequired,
    onValueChanged: PropTypes.func.isRequired
}

这是专注于文本输入时键盘显示的方式：

我要实现的目标（键盘应显示在建议列表下方）：

更新：

我找到了以下解决方案，我尝试在显示键盘时添加填充，并在隐藏键盘时将填充重置为正常，但问题是该解决方案适用于点心以及Android和iOS，但不适用于我的手机或更改padding时我身边的模拟器底部视图没有被推到键盘上方：

https://snack.expo.io/rk8kQCuLE

有人可以告诉我为什么它不能在模拟器或我身边的设备中工作吗？我做错了什么？