使用 ListView 自动完成 TextInput - 必须点按两次 ListView 才能选择列表项答案

【问题标题】：Autocomplete TextInput with ListView - Have to tap ListView twice to select List Item使用 ListView 自动完成 TextInput - 必须点按两次 ListView 才能选择列表项
【发布时间】：2017-06-27 23:28:09
【问题描述】：

我有一个 textInput，它下面有一个 ListView，它就像一个自动完成功能。我没有使用第三方库，只是对原生组件做出反应。但是，由于在 TextInput 中输入文本时，TextInput 具有焦点，而 ListView 没有，因此您只需点击 listView 一次以使其获得焦点，然后再次点击它以选择列表项。有没有一种方法可以让您点击 ListView 项目一次，并将其注册为 ListItem 上的点击，而不必点击两次？

代码：

const getDisplay = (shouldHideResults) => {
  return shouldHideResults ? 'none' : 'flex'
}

var ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 })

let Location = (props) => {
  return (
    <View style={styles1.container}>
      <TextInput
        style={styles1.textinput}
        onChangeText={text => changeText(props, text)}
        placeholder="Location"
        value={props.locationInput}
        ref={input => locationInputElement = input} />
      <ListView
        dataSource={ds.cloneWithRows(props.autocompleteResults.predictions)}
        renderRow={place => renderAutocompleteItem(props, place)}
        style={{ 
          display: getDisplay(shouldHideResults)
        }} />
    </View>
  )
}

var styles1 = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFFFFF',
  },
  textinput: {
    marginTop: 30,
    backgroundColor: '#DDDDDD',
    height: 40,
    width: 200
  }
})

【问题讨论】：

标签： javascript listview reactjs react-native

【解决方案1】：

将ListView 的keyboardShouldPersistTaps 属性设置为true。

<ListView
    dataSource={ds.cloneWithRows(props.autocompleteResults.predictions)}
    renderRow={place => renderAutocompleteItem(props, place)}
    style={{ 
      display: getDisplay(shouldHideResults)
    }} 
    keyboardShouldPersistTaps={true}/>

【讨论】：

【解决方案2】：

我所做的是用 TouchableWithoutFeedback 包裹视图，并在按下视图中的任意位置时关闭键盘，请通过以下代码 sn-p：

import { Keyboard, TouchableWithoutFeedback } from 'react-native';

render()
{
  return(
   <TouchableWithoutFeedback onPress={() => Keyboard.dismiss() } >
      <View style={styles1.container}>
      <TextInput
        style={styles1.textinput}
        onChangeText={text => changeText(props, text)}
        placeholder="Location"
        value={props.locationInput}
        ref={input => locationInputElement = input} />
      <ListView
        dataSource={ds.cloneWithRows(props.autocompleteResults.predictions)}
        renderRow={place => renderAutocompleteItem(props, place)}
        style={{ 
          display: getDisplay(shouldHideResults)
        }} />
    </View>
   </TouchableWithoutFeedback >
)
}

干杯:)

【讨论】：

不起作用，但感谢您的尝试。列表项最初仍然不可点击，因为在输入时它仍然没有焦点。
为keyboardShouldPersistTabs={true}的视图提供支持