Question

我的处境非常令人沮丧。试图让键盘消失，并在子行中检测onPress事件处理程序。

这是我的代码：

  _renderRow = (prediction) => {
    return (
      <TouchableOpacity onPress={() => {
        Keyboard.dismiss();
        this.setState({ location: prediction.description });
      }}>
        <View style={styles.listItemContainer}>
          <Text>{prediction.description}</Text>
        </View>
      </TouchableOpacity>
    )
  }

  render() {
    return (
    <View style={styles.wrapper}>
      {/* style={[this.state.predictions.length > 0 ? styles.searchContainerSuggest : styles.searchContainer]} */}
      <View style={styles.searchContainerSuggest}>
        <View style={{paddingLeft: 10, height: 45, display: 'flex', justifyContent: 'center'}}>
          <TextInput
            placeholder="Enter location"
            value={this.state.location}
            onChangeText={location => this.onChangeLocation(location)}
            style={styles.textInput}
          />
        </View>
        {this.state.predictions.length && this.state.location !== '' ?
          <FlatList
            keyboardShouldPersistTaps={'handled'}
            refreshing={!this.state.loaded}
            initialNumToRender={10}
            enableEmptySections={true}
            data={this.state.predictions}
            keyExtractor={(_, index) => index.toString()}
            renderItem={ ({item: prediction}) => this._renderRow(prediction) } />
            : null}
      </View>
    </View>
    );
  }

关于如何调试此问题，我可能需要一两个帮助。

查找了一些有关如何隐藏键盘并允许同时按下特定选择的示例。

我认为keyboardShouldPersistTaps将允许选择子项。选择后，onPress事件处理程序将触发，这就是我调用Keyboard.dismiss（）来隐藏键盘的地方。似乎不起作用。

Answer 1

将keyboardDismissMode =“ none”添加到FlatList

Answer 2

对于任何遇到与我相同的问题的人。检查您的FlatList或ScrollView是否嵌套在另一个FlatList或ScrollView中。

如果是，则添加

keyboardShouldPersistTabs='handled'

也可以作为道具。

Answer 3

就我而言，除了将keyboardShouldPersistTabs='handled'添加到有问题的FlatList之外，还需要将keyboardShouldPersistTabs='handled'和nestedScrollEnabled={true}添加到父项ScrollView在以上两个级别中，包装了我打算使用的FlatList。在react-native仓库中查看this issue，以了解更多信息。

反应本机FlatList键盘应该不保留提示

3 个答案: