Reagieren india TextInput- und FlatList onPress von ListItem

Question

So erfassen Ich versuche, eine automatische Vervollständigung Suchfeld mit 2 Geschwister Ansichten TextInput- und FlatList (das wird nur angezeigt, wenn this.state.data.length> 0) zu schaffen, damit meine Render-Funktion unten gegeben: -

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

Das Problem ist, wenn ich auf das Listenelement klicken, der erste Klick löst den onEndEditing Rückruf der TextInput und dann der zweite Klick löst die onPress der TouchableOpacity des Listenelements.

Wie kann ich den onPress des Listeneintrags beim ersten Klick auslösen?

Answer 1

Es ist ein aktiver issue in reagieren-native.

In der Zwischenzeit können Sie versuchen, behandeln keyboardShouldPersistTaps Eigenschaft in einem ScrollView statt.

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