javascript - React Native FlatList keyboardShouldPersistTaps 不持久

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

在我的例子中，除了将 keyboardShouldPersistTabs='handled' 添加到有问题的 FlatList 之外，还需要添加 keyboardShouldPersistTabs='handled' 和 nestedScrollEnabled={true} 到父 ScrollView 像上面的 2 个级别，包装 FlatList 我打算获得这种行为。查看 this issue在 react-native 存储库中获取更多信息。