React natif TextInput et FlatList capture onPress de ListItem

Question

Je suis en train de créer une Autocomplete Boîte de recherche ayant 2 vues frères et soeurs TextInput et FlatList (qui est seulement affiché lorsque this.state.data.length> 0) donc ma fonction render est donnée ci-dessous: -

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>); 
} 

le problème est quand je clique sur l'élément de liste le premier clic déclenche le rappel onEndEditing du TextInput puis le second clic déclenche l'onPress du TouchableOpacity de l'élément de la liste.

Comment puis-je déclencher l'onPress de l'élément de la liste sur le premier clic s'il vous plaît?

Answer 1

Il est un issue actif dans React natif.

En attendant, vous pouvez essayer de gérer la propriété keyboardShouldPersistTaps dans un ScrollView à la place.

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