react-native - React Native TextInput 和 FlatList 捕获 ListItem 的 onPress

Question

因此，我正在尝试创建一个具有 2 个同级 View TextInput 和 FlatList(仅在 this.state.data.length> 0 时显示)的自动完成搜索框，因此我的渲染函数如下所示:-

 renderItem = ({ item }) => {
          return (
            <TouchableOpacity 
             onPress={(item) => {/* do something here */}}>
             <Text>{item.key}</Text>
            </TouchableOpacity>
          );
        }

render(){
  return (
   <View>
     <TextInput />
     {this.state.data.length > 0 && 
       <FlatList 
       data={this.state.data}
       renderItem={this.renderItem} />}
   </View>);
}

问题是当我点击列表项时，第一次点击触发 TextInput 的 onEndEditing 回调，然后第二次点击触发 onPress TouchableOpacity 的。

请问如何在第一次点击时触发列表项的onPress？

Answer 1

这是一个活跃的issue在 native react 中。

与此同时，您可以尝试在 ScrollView 中处理 keyboardShouldPersistTaps 属性。

return (
        <ScrollView
            style={ styles.flex }
            automaticallyAdjustContentInsets={ false }
            keyboardShouldPersistTaps="handled"
            contentInset={{ 'bottom':20 }}
            keyboardDismissMode='on-drag'
            >
            <View>...</View>
        </ScrollView>
    );