Question

我有一个带有ListView的textInput，它就像一个自动完成。我没有使用第三方库，只是对原生组件做出反应。但是，因为在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
  }
})

Answer 1

将aiohttp的{{1}}属性设为keyboardShouldPersistTaps。

ListView

Answer 2

我所做的是使用TouchableWithoutFeedback包装视图，在按下视图中的任意位置时我会关闭键盘，请查看以下代码段：

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 >
)
}

干杯：）

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

2 个答案: