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}到像上面 2 个级别的父级ScrollView，包装FlatList我想要获得此行为的内容。在存储库中查看此问题react-native以获取更多信息。