React Native FlatList 键盘ShouldPersistTaps 不持久答案

【问题标题】：React Native FlatList keyboardShouldPersistTaps not persistingReact Native FlatList 键盘ShouldPersistTaps 不持久
【发布时间】：2019-10-28 11:34:25
【问题描述】：

我有一个非常令人沮丧的情况。试图让键盘消失并检测子行中的 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() 以隐藏键盘的地方。好像没用。

【问题讨论】：

标签： javascript reactjs react-native react-native-flatlist

【解决方案1】：

在我的情况下，除了将keyboardShouldPersistTabs='handled' 添加到有问题的FlatList 之外，还需要将keyboardShouldPersistTabs='handled' 和nestedScrollEnabled={true} 添加到父级ScrollView 就像上面的2 个级别一样，包装FlatList I旨在获得这种行为。在react-native repo 中查看this issue 了解更多信息。

【讨论】：

【解决方案2】：

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

如果是，则添加

keyboardShouldPersistTaps='handled'

将元素作为道具也是如此。

【讨论】：

【解决方案3】：

将keyboardDismissMode="none" 添加到FlatList

【讨论】：

在keyboardShouldPersistTap上方添加了一行，没有用