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

Question

所以我正在尝试创建一个具有 2 个兄弟视图 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>);
}

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

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

Answer 1

这是 react-native 中的一个活跃问题。

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

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