时间戳

首页 > 解决方案 > React Native FlatList 键盘ShouldPersistTaps 不持久

javascript - React Native FlatList 键盘ShouldPersistTaps 不持久

问题描述

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

标签： javascriptreactjsreact-nativereact-native-flatlist

解决方案

在我的情况下，除了添加keyboardShouldPersistTabs='handled'到有FlatList问题的内容之外，还需要添加keyboardShouldPersistTabs='handled'和添加nestedScrollEnabled={true}到上面 2 个级别的父ScrollView级，包装FlatList我打算使用此行为。在repo 中查看此问题react-native以获取更多信息。

推荐阅读