reactjs - 来自 react-native-searchable-dropdown 的 React-native 组件 SearchableDropdown 不会触发 onItemSelect={(item) => {console.log(item)}}

Question

我想使用 react-native-searchable-dropdown 中的 SearchableDropdown 作为自动完成的下拉选择。当从下拉列表中选择一个元素时，应该会触发事件 onItemSelect。但它不会触发。

import SearchableDropdown from 'react-native-searchable-dropdown';
import React, {Component} from 'react';

 constructor(props) {
    super(props);
    this.state = {
      selectedId: 0,
    };
  }

...

export default class SearchComponent extends Component {

render() {
   return(
      <ScrollView>
        <SearchableDropdown
          onItemSelect={item => console.log(item)}
          containerStyle={{padding: 5}}
          itemStyle={{
            padding: 10,
            marginTop: 2,
            backgroundColor: 'white',
            borderColor: 'white',
            borderWidth: 1,
            borderRadius: 5,
          }}
          itemTextStyle={{color: 'black'}}
          itemsContainerStyle={{height: 220}}
          items={skills}
          resetValue={false}
          textInputProps={{
            placeholder: 'Placeholder',
            underlineColorAndroid: 'transparent',
            style: {
              padding: 12,
              borderWidth: 1,
              backgroundColor: 'white',
              borderColor: theme.colors.caption,
              borderRadius: 10,
            },
            onTextChange: text => alert(text),
          }}
          listProps={{
            nestedScrollEnabled: true,
          }}
        />
    </ScrollView>
)}

有人可以帮我解决这个问题吗？

Answer 1

这个问题也可以通过添加这个 Prop keyboardShouldPersistTaps = 'always' 来解决到您的 ScrollView 组件。

这解决了我的问题，见下文:

render() {
   return(
      <ScrollView 
         keyboardShouldPersistTaps = 'always'>
        <SearchableDropdown
          onItemSelect={item => console.log(item)}
          ...
        />
      </ScrollView>
   )
}